CSS: Padding

The CSS padding property defines a padding (space) inside 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; } </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;
}
      </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.

Ten pixels of padding space are installed inside each paragraph border, all around the text.