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"
  <html xmlns="" lang="en" xml:lang="en">


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


    <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>


    <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>

(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.