Box Model: CSS Internal Padding

The internal padding of an element is between the border and the content area. The simplest attribute to control this area is the padding attribute.

The CSS padding attribute defines the blank area between the element's border and its content.

CSS padding Property

The CSS padding attribute defines the inner margin of an element. The padding attribute accepts length values or percentage values but does not allow negative values.

For example, if you want all h1 elements to have a 10-pixel inner margin on all sides, you just need to do this:

h1 {padding: 10px;}

You can also set the inner margin of each side in the order of top, right, bottom, and left, and each side can use different units or percentage values:

h1 {padding: 10px 0.25em 2ex 20%;}

Individual inner margin properties

Also, the following four individual properties can be used to set the top, right, bottom, and left inner margins separately:

As you might have guessed, the following rule achieves the same effect as the shorthand rule above:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Percentage values for inner margin

As mentioned before, percentage values can be used to set the inner margin of an element. Percentage values are calculated relative to the parent element's width, just like the margin. Therefore, if the parent element's width changes, they will also change.

The following rule sets the inner margin of the paragraph to 10% of the parent element's width:

p {padding: 10%;}

For example, if the parent element of a paragraph is a div element, then its inner margin should be calculated based on the div's width.

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

Note:The top and bottom inner margins are consistent with the left and right inner margins; that is, the percentage of the top and bottom inner margins is set relative to the parent element's width, not the height.

CSS inner margin example:

All inner margin properties in one declaration
This example demonstrates using shorthand properties to set all inner margin properties in one declaration, which can have one to four values.
Set bottom inner margin 1
This example demonstrates how to set the bottom inner margin of a cell using centimeter values.
Set bottom inner margin 2
This example demonstrates how to set the bottom inner margin of a cell using percentage values.
Set left inner margin 1
This example demonstrates how to set the left inner margin of a cell using centimeter values.
Set left inner margin 2
This example demonstrates how to set the left inner margin of a cell using percentage values.
Set right inner padding 1
This example demonstrates how to set the right inner padding of a cell using centimeter values.
Set right inner padding 2
This example demonstrates how to set the right inner padding of a cell using percentage values.
Set top inner padding 1
This example demonstrates how to set the top inner padding of a cell using centimeter values.
Set top inner padding 2
This example demonstrates how to set the top inner padding of a cell using percentage values.

CSS Inner Padding Attribute

Attribute Description
padding Shorthand property. It is used to set all the inner padding properties of an element in a single declaration.
padding-bottom Set the bottom inner padding of the element.
padding-left Set the left inner padding of the element.
padding-right Set the right inner padding of the element.
padding-top Set the top inner padding of the element.