Pro HTML5 and CSS3 Design Patterns

CHAPTER 4 ■ BOX MODELS

Box Model

HTML

<h1>Box Model</h1>

<div class="box"></div>

<!-- The HTML code that creates the labels and extra borders is not shown. -->

CSS

*.box { display:static;

overflow:visible;

visibility:visible;

width:160px;

height:150px;

padding:30px;

border-top: 30px solid gray; border-bottom:30px solid black;

border-left:30px solid gray; border-right: 30px solid black;

margin-left:230px; margin-top:80px;

background-color:gold; }

/* Nonessential rules are not shown. */