Objasnění box-modelu — příklad

Příklad k článku Objasnění box-modelu.

Selektor potomka

#child {
     padding: 15px;
     border: 10px solid #000;
     background-color: #ff0;
     width: 300px
}
html>body #child {
     width: 250px
}

<div id="child">
     …
</div>

Ilustrační pravítko, šířka 300px

DIV má nastavenu šířku 250px, orámování 10px a vnitřní okraje 15px.

„Matrjoška“ hack

autor: Petr Staníček [-pixy-]

#matrjoska-null {
     width: 300px;
     border: none;
     padding: 0
}
#matrjoska {
     padding: 15px;
     border: 10px solid #000;
     background-color: #ff0
}

<div id="matrjoska-null">
     <div id="matrjoska">
          …
     </div>
</div>

Ilustrační pravítko, šířka 300px

DIV má nastavenu šířku 250px, orámování 10px a vnitřní okraje 15px.

Simplified Box Model Hack

autor: Holly Bergevin

#sbmh {
     padding: 15px;
     border: 10px solid #000;
     background-color: #ff0;
     width: 250px
}
* html #sbmh {
     width: 250px;
     w\idth: 300px; 
}

<div id="sbmh">
     …
</div>

Ilustrační pravítko, šířka 300px

DIV má nastavenu šířku 250px, orámování 10px a vnitřní okraje 15px.