topical media & game development

talk show tell print

basic-web-html-07-ch07-eg21.htm / htm



  <?xml version="1.0" ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  

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>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.