CSS Padding

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Paddings

The CSS padding properties provide space around an element’s content, within any defined borders.

CSS gives you full control over the padding. By using the properties, the padding can be set `for each side of an element (top, right, bottom, and left).

Padding – Individual Sides

CSS has properties for defining the padding for each side of an element:

padding-top
padding-right
padding-bottom
padding-left

All the padding properties can have the following values:

length – defines padding in px, pt, cm, etc.
% – defines padding in % of the width of the element.
inherit – defines that the padding must be inherited from the parent element

				
					<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

CSS

				
					div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Output

Padding – Shorthand Property

To reduce the code, it is possible to define all the padding properties in a single property.

The padding property is a shorthand property for the below individual padding properties:

padding-top
padding-right
padding-bottom
padding-left

If the padding property consist of four values:

padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

If the padding property consists of two values:

padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px