CSS: Margins

The CSS margin property defines a margin (white space) outside the box model border:

HTML file:	Displayed by browser:
<!DOCTYPE html> <html> <head> <style> h1 { border:2px solid blue; } p { border:1px solid grey; padding:10px; margin:30px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>	This is a heading This is a paragraph. This is a paragraph. This is a paragraph.

HTML file:

Displayed by browser:

<!DOCTYPE html>
  <html>
    <head>
      <style>
h1 { border:2px solid blue; }
p {
   border:1px solid grey;
   padding:10px;
   margin:30px;
}
      </style>
    </head>
    <body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
    </body>
  </html>

This is a heading

This is a paragraph.

Thirty pixels of margin space are added to the outside of each paragraph border line.