CSS Padding

CSS padding is the space between the content of an element and its border. It can be used to create a margin of space around an element, or to make an element appear larger.

Padding is specified using the padding property. The padding property can take up to four values, one for each side of the element:

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

If you only specify one value, it will be applied to all four sides of the element. If you specify two values, they will be applied to the top and bottom, and the left and right, respectively. If you specify three values, the first value will be applied to the top, the second value to the left and right, and the third value to the bottom. If you specify four values, they will be applied to the top, right, bottom, and left, respectively.

You can specify padding values in pixels, percentages, or other CSS units. For example, the following code would add a 10px padding to all sides of the element:

.element {
  padding: 10px;
}

You can also use the padding property to add different amounts of padding to different sides of the element. For example, the following code would add a 10px padding to the top and bottom of the element, and a 20px padding to the left and right:

.element {
  padding: 10px 20px;
}

Task

Give the header and form a padding of 20px, and ol a padding-left of 20px. Run the code to see the final results and experiment with the code to get used to it.

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT