Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 4 ■ BOX MODELS


Block Box


HTML


<h1>Block Box</h1>

<div class="container">
<div class="default">BEFORE</div>

<div class="box"> ↑ <br /> Top <br /> ← Left      
Right → <br /> Bottom <br /> ↓ </div>

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

CSS


*.box { display:block;
overflow:auto; visibility:visible;
width:220px; height:100px;
margin:10px auto; padding:10px; }

/* Nonessential rules are not shown.
See Inline Box for border and background properties. */
Free download pdf