CSS

CSS Padding

- The CSS padding properties are used to generate space around content.
- The padding properties set the size of the white space between the element content and the element border.
- The padding clears an area around the content (inside the border) of an element.

Padding - Individual Sides

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

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

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid red;
    background-color: yellow;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using Individual padding Properties:</h2>

<p>This is a paragraph with no specified padding.</p>
<p>This paragraph has a top and bottom padding of 50px, a left padding of 80px, and a right padding of 30px.</p>

</body>
</html>

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.
The padding property is a shorthand property for the following individual padding properties:

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

Example:


<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid red;
    background-color: yellow;
    padding: 50px 30px 50px 80px;
}
</style>
</head>
<body>

<h2>Using The padding Shorthand Property:</h2>

<p>This is a paragraph with no specified padding.</p>
<p>This paragraph has a top and bottom padding of 50px, a left padding of 80px, and a right padding of 30px.</p>

</body>
</html>