CSS Padding

To specify the space between the content and the border of an element, the CSS Padding is used. The CSS margin is used to specify the space around elements while CSS padding is used to clear an area around the content. The background colors affect CSS padding. Using separate properties, we can modify the top, bottom, left and right padding independently. The shorthand padding property can be used to modify all properties at once.

CSS Padding Properties:

Property Uses
padding Used to define all the padding properties in one declaration.
padding-left Used to define the left padding of an element.
padding-right Used to define the right padding of an element.
padding-top Used to define the top padding of an element.
padding-bottom Used to define the bottom padding of an element.

CSS Padding Values:

Value Uses
length Used to specify the fixed padding in pt, px, em etc.
% Used to specify the padding in % of containing element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid red;
  background-color: pink;
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>

Output:

Explanation:

In the above example, we are defining the separate properties to modify the top, bottom, left and right padding.

Please Share