Skip to Content
The Box Model
Padding II

Another implementation of the padding property lets you specify exactly how much padding there should be on each side of the content in a single declaration.

p.content-header { border: 3px solid grey; padding: 6px 11px 4px 9px; }

In the example above, the four values 6px 11px 4px 9px correspond to the amount of padding in a clockwise rotation. In order, it specifies the amount of padding on the top (6 pixels), right (11 pixels), bottom (4 pixels), and left (9 pixels) sides of the content.

When using this implementation of the padding property, we must specify a padding value for all four sides of the element.

However, if the top and bottom values for padding will equal each other, and the left and right values for padding will also equal each other, you can use the following shortcut:

p.content-header { padding: 5px 10px; }

The first value, 5px, sets the padding value for the top and bottom sides of the content. The second value, 10px, sets the padding value for the left and right sides of the content.



Change the h2 paddings so they are set in one line of CSS, using two values.


Using two values for the padding property, set the paragraph padding to 10 pixels on the top and bottom and 20 pixels on the left and right.

Folder Icon

Take this course for free

Already have an account?