Inline Block Inline-block

by samih

HTML

<div class="block">I am block</div>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<div class="inline-block">
    I am inline-block
</div>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<div class="inline-block">I am inline-block</div>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<span class="inline">I am inline</span>
<div class="inline-block">I am inline-block</div>
<div class="block">I am block</div>
<p> <- Try dragging the resizer between the view and code left and right to see how the different elements behave.</p>

CSS

.block, .inline, .inline-block {
    border: 1px solid black;
}

.inline-block {
    display: inline-block;
    height: 50px;
    background-color: lightblue;
}

.inline {
    background-color: lightyellow;
}

.block {
    background-color: lightgreen;
    height: 50px;
}

p {
    color: red;
}