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

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

        p { margin-top:40px; margin-bottom:30px; margin-left:20px; margin-right:20px;
            border-style:solid; border-width:1px; border-color:#000000;}

        em {background-color:#cccccc; margin-left:20px; margin-right:20px;}
  &lt;/style>
&lt;/head>

&lt;body>
&lt;h1>margin Properties&lt;/h1>
&lt;p>This paragraph will contain some &lt;em>keywords&lt;/em>, which will have added shading and a larger &lt;em>margin&lt;/em> around them. You will see that the &lt;em>left&lt;/em> and &lt;em>right&lt;/em> of these elements are sperad wider than other words.&lt;/p>
&lt;p>Each &lt;em>keyword&lt;/em> also has a &lt;em>background-color&lt;/em> property set to illustrate where the edge of the elment is and enhance the effect of the &lt;em>margin&lt;/em>.&lt;/p> 
&lt;p>Between each &lt;em>paragraph&lt;/em> there is also a top and bottom margin, although only the top one will show between paragraphs because of the smaller vertical margin &lt;em>collapsing&lt;/em> into the larger one.&lt;/p>
&lt;/body>
&lt;/html></pre>