head 


  
  <head>
    <title>Understanding the Box Model</title>
    <link rel="stylesheet" type="text/css" href="basic-web-html-07-ch07-eg21.css" />
  </head>

body 


  
  <body>
    <h1>Thinking Inside the Box</h1>
    <p class="description">When you are styling a web page with CSS page you
    must start to think in terms of <b>boxes</b>.</p>
  
    <p>Each element is treated as if it generates a new box. Each box can have
    new rules associated with it.</p>

image(s) 


  
    <img src="basic-web-html-07-images-boxmodel.gif" alt="How CSS treats a box" />
  
    <p>As you can see from the diagram above, each box has a <b>border</b>.
    Between the content and the border you can have <b>padding</b>, and
    outside of the border you can have a <b>margin</b> to separate this box
    from any neighboring boxes.</p>
  </body>
  </html>