inline, inline-block, block

by Blake Dietz

HTML

<div>
Two roads diverged in a yellow wood,<br/>
And sorry I could not travel both<br/>
And be one <span class="test-inline">traveler</span>, long I stood<br/>
And looked down one as far as I could<br/>
To where it bent in the undergrowth;<br/>
</div>
<div>
Two roads diverged in a yellow wood,<br/>
And sorry I could not travel both<br/>
And be one <span class="test-inline-block">traveler</span>, long I stood<br/>
And looked down one as far as I could<br/>
To where it bent in the undergrowth;<br/>
</div>
<div>
Two roads diverged in a yellow wood,<br/>
And sorry I could not travel both<br/>
And be one <span class="test-block">traveler</span>, long I stood<br/>
And looked down one as far as I could<br/>
To where it bent in the undergrowth;<br/>
</div>

CSS

h1 { font-size: 20px; font-weight: bold; }
div { border: solid 1px #c0c0c0; padding: 8px; margin: 12px; background-color: #f0f0e9; width: 70% }
/* Notice that width and height were set but inline completely ignores it. The inline element takes up only the space required */
.test-inline { display: inline; height: 100px; width:100px; border: dotted 1px red; background-color: white; }
/* Nocie here that height is taking effect. */
.test-inline-block { display: inline-block; height: 100px; border: dotted 1px red; background-color: white; }
/*Notice here that height is taking effect and the element's width takes up as much space as possible since it's block. The element also breaks out of inline.*/
.test-block { display: block; height: 100px; border: dotted 1px red; background-color: white; }