Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
The Box Model example

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment