CSS Padding

By | October 19, 2020

The CSS padding property also deals with the spacing. Using the padding property, we can set the space between the element content and its border. It is different from the CSS margin, where we set the space between the element and its neighbouring and parent elements.

CSS padding

padding provide space around the element content which makes the element border extend.

Vamware

Example

<!DOCTYPE html>

<html>
<head>
  <title></title>
  <style type="text/css">
    p{
        border: 2px solid red;
    }
    .pad_para{
        padding : 40px;
    }
  </style>
</head>
<body>
        <p class="pad_para"> Padding is applied to this paragraph</p>
        <p> Normal Paragraph without styled padding</p>
</body>
</html>

Preview

Padding is applied to this paragraph

Normal Paragraph without styled padding

padding property values

Padding property accepts three types of values:

Padding values Description
length In length, we can use different units such as px, pt, cm, etc.
% It defines the element padding in % referenced to the parent element.
Inherit The padding values will be inherited from the parent element.

padding subsidiary properties

padding has four subsidiary properties which give us more control over any element padding.

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

With these four properties, we can have full control over any HTML element padding.

CSS padding-top property

padding-top property defines the element content spacing from the element top border. It only provides padding to the content top.

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    p{
        border: 2px solid red;
    }
    .pad_para{
        padding-top : 40px;
    }
  </style>
</head>
<body>
        <p class="pad_para"> Padding is applied to this paragraph</p>
        <p> Normal Paragraph without styled padding</p>
</body>
</html>

Preview

Padding is applied to this paragraph

Normal Paragraph without styled padding 

CSS padding-bottom

The padding-bottom property set the spacing between the bottom of the element content and border. And it only accepts values in length and %.

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    p{
        border: 2px solid red;
    }
    .pad_para{
        padding-bottom:  40px;
    }
  </style>
</head>
<body>
        <p class="pad_para"> Padding is applied to this paragraph</p>
        <p> Normal Paragraph without styled padding</p>
</body>
</html>

Preview

Padding is applied to this paragraph

Normal Paragraph without styled padding

CSS padding-right

The padding-right property adds the specified value of space to the right side of the element content.

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    p{
        border: 2px solid red;
    }
    .pad_para{
        padding-right:  40px;
    }
  </style>
</head>
<body>
        <p class="pad_para"> Padding is applied to this paragraph</p>
        <p> Normal Paragraph without styled padding</p>
</body>

</html>

Preview 

Padding is applied to this paragraph

Normal Paragraph without styled padding

CSS padding-left

The padding-left property defines the padding only to the left side of the element.

Example:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    p{
        border: 2px solid red;
    }

    .pad_para{
        padding-left:  40px;
    }
  </style>
</head>
<body>
        <p class="pad_para"> Padding is applied to this paragraph</p>
        <p> Normal Paragraph without styled padding</p>
</body>
</html>

Preview: 

Padding is applied to this paragraph

Normal Paragraph without styled padding

CSS padding Shorthand:

If we only pass one value to the padding property, then it will apply that padding space to all the side of the element content. However, we can also pass four different values to the padding property to apply separate padding space around the element.

Synta

padding: top right bottom left

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">

    p{
        border: 2px solid red;
    }

    .pad_para{
        padding:  40px 10px 3px 70px ;
    }
  </style>
</head>

<body>
        <p class="pad_para"> Padding is applied to this paragraph</p>
        <p> Normal Paragraph without styled padding</p>
</body>
</html>

Preview

Padding is applied to this paragraph

Normal Paragraph without styled padding

CSS Padding Quick summary

  • padding defines the spacing between the content element and border.
  • The border of the element extends according to the padding space.
  • Padding can not have a negative value, which means there is no overlapping of content in padding.
  • Padding has four subsidiary properties, padding-left, padding-right, padding-bottom and padding-top, which give us more control over an element padding.
  • padding can accept four values at once which to define all four sides spacing for an element.

Leave a Reply

Your email address will not be published. Required fields are marked *