CSS Padding Properties

Control The Padding of HTML Elements

Padding is the space between the inside edge of an element and its contents. Padding allows you to create internal space between borders and text or other elements/containers.

CSS Padding Declarations work identically to CSS margin declarations in that you can apply them to all sides individually by naming the side with the "padding-side"(top, right, bottom, left) property or use the shorthand "padding" property.

Css Code:

p {
  border : 1px solid black;
  padding : 4px;
}
div {
  border : 1px solid black;
  padding : 10px 40px;
}

HTML Code:

<p>
	This text has 4 pixels of padding separating it 
	from the paragraph element inside edge.
</p>
<div>
	This div has 10 pixels of padding on the top and 
	bottom and 40 pixels of padding left and right.
</div>

Browser Display


This text has 4 pixels of padding seperating it from the paragraph element inside edge.


This div has 10 pixels of padding on the top and bottom and 40 pixels of padding left and right.

CSS Tutorials