CSS Padding

    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.

    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.

    Syntax 

    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

    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.
    Previous Tutorial Next Tutorial