Sunday poem
Ode to the Box Model
Content sits within its padding fair,.box { padding: 12px; }
the border draws a line to keep it there;.box { border: 1px solid; }
the margin, quiet, asks for nothing more.box { margin: 0 0 8px; }
than distance from the paragraph before./* space from the sibling above */
❦
And when two margins meet, as margins do,h2 { margin-bottom: 24px; }
they do not add — the larger one wins through;p { margin-top: 16px; } /* gap: 24px */
so every block, however small or wide,.block, .wide { display: block; }
collapses gracefully on either side./* vertical margins collapse */
❦
The float drifts left; the text flows round its shore;img { float: left; }
the inline wraps, then wraps a little more —span { display: inline; }
and in this bubble, set in serif type,body { font-family: serif; }
a C++ engine draws it, pipe by pipe./* rendered by litehtml */
Stanza 1 ›
Rhymes
In CSS
♡ 128