HTML & CSS Hands-On - Box Model - Start

by Karin Huber

HTML

<div class="container">
  <div id="div1">
    Div 1, blauer Border mit 5px
  </div>
</div>

<div class="container">
  <div id="div2">
    Div 1, blauer Border mit 5px, Abstand nach außen 20px
  </div>
</div>

<div class="container">
  <div id="div3">
    Div 1, blauer Border mit 5px, Abstand nach außen 20px, Abstand nach innen 10px
  </div>
</div>

<div class="container">
  <div id="div4">
    Div 1, blauer Border mit 5px, Abstand nach außen 20px, Abstand nach innen 10px, grüner Umriss mit 5px
  </div>
</div>

<div class="container">
  <div id="div5">
    Div 1, blauer Border mit 5px, Abstand nach außen 20px, Abstand nach innen 10px, grüner Umriss mit 5px (Abstand 25px) 
  </div>
</div>

CSS

.container {
  border: 1px solid red;
}