CSS Padding

The padding area is the space between the content of the element and its border.

CSS Padding Properties

The CSS padding properties allow you to set the padding area for an element that separates its border from its content. The padding is affected by the background-color of the box.

Define Paddings for Individual Sides

You can easily specify the different paddings for the different sides of an element such as top, right, bottom or left side using the CSS individual padding property.

  • h1 {
  •     padding-bottom: 10px;
  • }
  • p {
  •     padding-top: 20px;
  •     padding-left: 50px;
  • }

The padding Shorthand Property

The padding property is a shorthand property to avoid setting padding for each side of an element separately i.e. padding-top, padding-right, padding-bottom, padding-left.

  • h1 {
  •     padding: 10px 20px;
  • }
  • p {
  •     padding: 10px 15px 20px 25px;
  • }
 

Note:Unlike CSS margin properties, values for padding properties cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

The padding property can take one, two, three, or four whitespace separated values.

  • If one value is set, this is applied to all the four sides.
  • If two values are specified, the first value is applied to the top and bottom, and the second value is applied to the right and left side.
  • If three values are specified, the first value is applied to the top, second value is applied to left and right side and the last value is applied to the bottom.
  • If four values are specified, they are applied to the top, right, bottom and the left side respectively in the specified order.
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.