Pro HTML5 and CSS3 Design Patterns

C H A P T E R 6

Box Model Properties

This chapter shows how box model properties style the various types of boxes. These are basic design patterns.

The Margin, Border, and Padding design patterns contain examples contrasting how each property works in each type of box. Their main purpose is to contrast in one place how the same property means different things in different contexts. When using this book as a reference, you may also want to refer to the Margin, Border, and Padding design patterns to determine which type of element, box, and property will do what you want.

Chapter Outline

Margin contrasts how margins work differently for different types of boxes. It shows how margins change the position of an element in relation to its container and siblings.
Border contrasts how borders work differently for different types of boxes. It shows how borders change the position of an element in ways similar to margins, and in some ways different from margins.
Padding contrasts how padding works differently for different types of boxes. It shows how padding works almost identically to borders and margins.
Background shows how to assign a color to the background of an element. It also shows how to use a tiled image for the background. You can tile the image across and down, across only, or down only, or show the image only once. You can position the image at a specific location in the background. You can also direct whether the image scrolls with the content or remains in a fixed location.
Overflow shows how to hide overflowing content, display it, or display scrollbars.
Visibility shows how to hide an element while leaving a placeholder for it in the flow.
Page Break shows how to insert a page break into your document before an element or after an element. It also shows how to print blank pages.

Margin

CSS

*.before { margin:0; }



*.after { margin-top:10px; margin-bottom:0;

  margin-left:30px; margin-right:10px; }



/* Nonessential rules are not shown.

   HTML code is omitted to allow the example to fit on one page. */

*.before { border:1px solid black; }



*.after { border-top:10px solid dimgray;  border-bottom:1px solid black;

  border-left:30px solid black;   border-right:5px solid black; }



/* Nonessential rules are not shown.

    HTML code is omitted to allow the example to fit on one page. */

*.before { padding:0; }



*.after { padding-top:10px;  padding-bottom:0;

  padding-left:30px; padding-right:10px; }



/* Nonessential rules are not shown.

   HTML code is omitted to allow the example to fit on one page. */

 <h1>Background</h1>

 <p><span class="no-bg">&nbsp;</span>No background</p>

 <p><span class="bg-color">&nbsp;</span>Background color</p>

 <p><span class="bg-image">&nbsp;</span>Background image not tiled</p>

 <p><span class="bg-repeat">&nbsp;</span>Background image tiled</p>

 <p><span class="bg-rx">&nbsp;</span>Background image repeat-x</p>

 <p><span class="bg-ry">&nbsp;</span>Background image repeat-y &rarr;</p>

 <p><span class="bg-pos-lt">&nbsp;</span>Background image center bottom</p>

 <p><span class="bg-pos-rb">&nbsp;</span>Background image right bottom</p>

CSS

p { margin-left:240px; margin-top:0px; margin-bottom:10px; }

span { margin-left:-230px; margin-right:30px; padding-left:195px; font-size:19px;

  background-position:left bottom; background-repeat:no-repeat;

  background-color:black; background-image:url("star.gif"); }



*.no-bg { background-image:none;  background-color:transparent; }

*.bg-color { background-image:none;  background-color:black; }

*.bg-image { background-repeat:no-repeat; }

*.bg-repeat { background-repeat:repeat; }

*.bg-rx { background-repeat:repeat-x; }

*.bg-pos-lt { background-position:center bottom; }

*.bg-pos-rb { background-position:right bottom; }

*.bg-ry { background-repeat:repeat-y; background-position:center top;

  padding-left:22px; float:right; height:263px; margin:0px;

  position:relative; top:-170px; }

 <div id="ex1">

  <h1><code>overflow:visible</code></h1>

  <p class="ex1" >

    <span class="big">OVERFLOW</span> <br />

    <span class="nowrap">The text in this span does not wrap!</span>

    <select size="2">

      <option>select me</option>

      <option selected="selected">select me</option>

    </select><br />

    <span>Vertical Overflow.</span>

  </p>

 </div>

CSS

*.ex1 { overflow:visible; }

*.ex2 { overflow:hidden; }

*.ex3 { overflow:scroll; }

*.ex4 { overflow:auto; }



/*  Nonessential rules are not shown.  */

<h1>Visibility</h1>



<p>There is hidden content here: <span class="hidden">CAN YOU SEE ME NOW?</span>

  You can't see it, because it's styled with <code>visibility:hidden</code>,

  but you can see where it would have been rendered. </p>



<p>There is visible content here: <span class="visible">CAN YOU SEE ME NOW?</span> You can see

it, because it's styled with <code>visibility:visible</code>. </p>

CSS

span { padding:4px; background-color:white;

  border-left:1px solid gray; border-right:2px solid black;

  border-top:1px solid gray; border-bottom:2px solid black; }

p  { background-color:gold; padding:10px; line-height:1.5em; }



*.hidden { visibility:hidden; }

*.visible { visibility:visible; }



span:hover { visibility:hidden; }

 <div class="page-break-after">Page break after this element. </div>

 <div class="page-break-after">Page break after this element. </div>

 <div class="page-break-before">Page break before this element.</div>

CSS

*.page-break-before { page-break-before:always; }

*.page-break-after { page-break-after:always; }