CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 257

level boxes may wrap</span> around more
than one line if the layout requires them to.
</p>
</div>
And the CSS is as follows:
.box {

border:2px solid black;
padding:10px;

}

Setting box type
The type of box used is not set in stone. In fact, there is a CSS property called display
for setting the type of box an element is contained in. Setting display:block on
an element will treat it as being contained in a block-level box, while setting dis-
play:inline will treat it as being contained in an inline-level box. Having the ability
to swap between box types is particularly useful with anchor elements ( a ), which are
inline-level elements by default, so they ignore width and height settings.
Consider the following HTML:
<a href="#">Link</a>
<a href="#" class="block">Link</a>
The preceding code could be styled with the following CSS:
a {

width:200px; /* set the width */

height:60px; /* set the height */

border:1px solid #000; /* set a black border

*/

background-color:#ccc; /* set a gray back-

ground */

padding:10px; /* set 10 pixels of

padding */

text-decoration:none; /* remove the under-

line */

text-align:center; /* center align the

text */

margin-top:20px; /* add margin to the