Pro HTML5 and CSS3 Design Patterns

CHAPTER 4 ■ BOX MODELS

Inline-Block Box

HTML

<h1>Inline-block Box</h1>

<div class="container">

<span class="default">BEFORE</span>

<img class="replaced-box" src="star.gif" alt="star" />

<span class="default">AFTER</span>

<span class="default">BEFORE</span>

<span class="inline-box">Inline element displayed as an inline block.</span>

<span class="default">AFTER</span>

</div>

CSS

*.replaced-box { display:inline-block;

overflow:visible; visibility:visible;

width:51px; height:52px;

margin:10px 100px; padding:10px 120px; }

*.inline-box { display:inline-block;

overflow:visible; visibility:visible;

width:275px; height:52px;

margin:10px 100px; padding:10px 10px; }

/* Nonessential rules are not shown.

See Inline Box for border and background properties. */