<pre> 
&lt;!DOCTYPE html>
&lt;html>

&lt;head>
  &lt;title>Understanding the Box Model&lt;/title>
  &lt;style>
    body {
        color:#000000;
        background-color:#ffffff;
        font-family:arial, verdana, sans-serif; 
        font-size:12px;}

    body, h1, p, img, b {border-style:solid; border-width:2px; border-color:#000000; padding:2px;}
    #round              {border-radius:10px;}
    #tight              {border-radius:10px; display:inline-block}
    h1, b               {background-color:#cccccc;}
  &lt;/style>
&lt;/head>

&lt;body>
&lt;h1>Box Related Properties&lt;/h1>
&lt;p class="description">When you are styling a web page with CSS page you must start to think in terms of &lt;b>boxes&lt;/b>.&lt;/p>
&lt;p>Each element is treated as if it generates a new box. Each box will have a "margin", a "border", "a padding" and "content".&lt;/p>
&lt;img src="img/boxmodel.gif" alt="How CSS treats a box">
&lt;p>As you can see from the diagram above, each box can have a &lt;b>border&lt;/b>. Between the content and the border you have &lt;b>padding&lt;/b>, and outside of the border you have a &lt;b>margin&lt;/b> to separate this box from any neighboring boxes. &lt;/p>

&lt;p id=round>I can even have a box with rounded corners using &lt;b>border-radius&lt;/b> property &lt;/p>
&lt;p id=tight>This box only fits the size of text using the &lt;b>display:inline-block&lt;/b> property.&lt;/p>
&lt;/body>
&lt;/html></pre>