CSS Padding Tutorials

CSS padding is the area between the HTML element content and the border of the element. CSS padding properties allow you to control the width of this area.

Visual Representation of the Box Model Concept

The image below is a visual representation of the box model concept and where the padding fits into the box model in relation to the element and the border and margin properties.

css box model image

CSS padding property values can be defined as a fixed value (pixels, pt, em, etc.) or as a percentage (%) of the containing element. When applying padding properties, it is best to used fixed values to set the padding.

NOTE: The padding area of an HTML element inherits the background color of the element.

How To Use a Fixed Value to Set the Padding of all 4 Sides

The CSS rule below shows you how to use a fixed value to set the padding of all 4 sides of an HTML element.

p { padding:10px; }

How To Use a Percentage Value to Set the Padding of all 4 sides

The CSS rule below shows you how to use a percentage value to set the padding of all 4 sides of an HTML element.

p { padding:25%; }

How To Set the Padding of all 4 Sides Using only 2 Values

The CSS rule below shows you how to set the padding of an HTML element using 2 values in declaration in top/bottom and right/left pair values. The the top and bottom padding in the CSS rule is 25 pixels and right and left is 50 pixels.

p { padding:25px 50px; }

How To Set the Padding of all 4 Sides Using 3 Values

The CSS rule below shows you how to set the padding of an HTML element using 3 values. The first value sets the top padding, the second value sets the right and left padding and the third value sets the bottom value. The top padding in the CSS rule below is 25 pixels, the right and left padding is 100 pixels and the bottom padding is 50 pixels.

p { padding:25px 100px 50px; }

How To Set the Padding of Each Side Individually

The CSS rule below shows you how to set the padding of each side individually.

p { padding-top:25px; padding-right:50px; padding-bottom:75px; padding-left:100px; }