Skip to content

Instantly share code, notes, and snippets.

@parhammmm
Forked from LeaVerou/dabblet.css
Created June 25, 2012 08:09
Show Gist options
  • Save parhammmm/2987280 to your computer and use it in GitHub Desktop.
Save parhammmm/2987280 to your computer and use it in GitHub Desktop.
CSS Box model demo
/**
* CSS Box model demo
*/
#box {
width: 300px;
height: 200px;
padding: 30px;
border-width: 10px;
/*box-sizing: border-box;*/
}
/* No editing below this point */
#box {
width: 300px;
height: 200px;
padding: 30px;
border-style: solid;
border-color: orange;
margin: 20px auto;
background-image: linear-gradient(yellowgreen, yellowgreen), linear-gradient(yellow, yellow);
background-clip: content-box, padding-box, border-box;
font: 100%/1.4 sans-serif;
text-shadow: 0 1px 1px white;
}
body:after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
background: linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
background-size: 10px 10px, 50px 50px, 10px 10px, 50px 50px;
}
aside {
position: absolute;
bottom:1em;
right: 1em;
z-index: 1;
line-height: 1.5;
}
dfn {
display: block;
font-weight: bold;
font-style: normal;
}
dfn:before {
content:"";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -.2em;
margin-right: .4em;
border-radius: 50%;
}
dfn[title="orange"]:before { background: orange }
dfn[title="yellowgreen"]:before { background: yellowgreen }
dfn[title="yellow"]:before { background: yellow }
dfn[title="orange"] { color: orange }
dfn[title="yellowgreen"] { color: yellowgreen }
dfn[title="yellow"] { color: yellow }
<p id="box">
This demo attempts to demonstrate how the CSS box model works. Try adjusting the <code>width</code>, <code>height</code>,
<code>padding</code> or <code>border</code> and observe. You may also try using <code>box-sizing</code>
to see how it changes the way the box model works. The background grid is at 10px intervals and the darker lines at 50px intervals.
</p>
<aside>
<h1>Legend</h1>
<dfn title="orange">border-box</dfn>
<dfn title="yellow">padding-box</dfn>
<dfn title="yellowgreen">content-box</dfn>
</aside>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment