This is a simple example of how the Box Model works and reacts to different values of the box-sizing
attribute.
See the living gist here.
<div class="base rule">base</div> | |
<div class="w3c-box-model">w3c</div> | |
<div class="border-box">border-box</div> | |
<div class="content-box">content-box</div> | |
<div class="padding-box">padding-box</div> |
// ---- | |
// libsass (v3.1.0-beta) | |
// ---- | |
.rule { | |
&:before { | |
content: ""; | |
width: 60%; | |
position: absolute; | |
border-top: 3px dashed red; | |
} | |
} | |
.base { | |
width: 96px; | |
height: 96px; | |
display: inline-block; | |
vertical-align: bottom; | |
background-color: orange; | |
margin-right: 1em; | |
} | |
// standard browser W3C Box Model use | |
.w3c-box-model { | |
@extend .base; | |
padding: 10px; | |
border: 10px solid; | |
} | |
// Over-rides W3C Box Model for the traditional box model | |
.border-box { | |
@extend .w3c-box-model; | |
box-sizing: border-box; | |
} | |
// Usign content-box resets or maintaines W3C Box Model | |
.content-box { | |
@extend .w3c-box-model; | |
box-sizing: border-box; // redefine box model here | |
} | |
.content-box { | |
box-sizing: content-box; // resets to W3C box model here | |
} | |
// experimental - not supported | |
.padding-box { | |
@extend .base; | |
box-sizing: padding-box; | |
border: 10px solid; | |
} |