A CSS Example with Boxes

Using borders and margins to show off the CSS Box Model.

Contents

  1. A Block Styled Page
  2. The Source Code
  3. Notes

A Block Styled Page

You can see how the page looks here.

The Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8"  />

    <style>

      body {
        border:5px solid green;
      }

      h1 {
        border:5px solid orange;
        margin: 2px;
      }

      h2 {
        border:5px solid aqua;
        margin: 2px;
      }

      p {
        border:5px solid yellow;
        margin: 2px;
      }


      li {
        border:5px solid silver;
        margin: 2px;
      }

      i {
        border:5px solid purple;
        margin: 2px;        
      }

      ol {
        border:5px solid fuchsia;
        margin: 2px;
      }

      ul {
        border:5px solid lime;
        margin: 2px;
      }

      strong {
        border:5px solid black;
        margin: 2px;
      }

      mark {
        border:5px solid blue;
        margin: 2px;

      }

      a {
        border:5px solid red;
        margin: 2px;

      }

    </style>

  </head>
  <body>
    <h1>This is a heading (for testing purposes)</h1>

    <p>Paragraphs are the bread and butter of HTML.</p>

    <p>They can include <strong>strong</strong> tags.
    </p>

    <ol>
      <li>Lists are cool!</li>
      <li>The list things.</li>
      <li>This one has an <i>i</i> inside.</li>
      <li><p>This one contains a &lt;ul&gt;:</p>
        <ul>
          <li>Item 1</li>
          <li><mark>Marked item</mark></li>
          <li>Final item</li>
        </ul>
        <li><h2>What happens with an h2?</h2></li>
      <li>Final order</li>
    </ol>

    <p>A final paragraph with a dummy
      <a href="#">link</a> inside it.</p>

  </body>
</html>

Notes

  1. Using the border property (and a bit of extra spacing from the margin property) how the HTML elements stack and nest is much clearer.
  2. Some elements, like em, i, mark, and a, don’t seem to respect the margin at the top and bottom.
  3. Some boxes stretch to fit the box they are in and others do not.