Home
CSS

CSS Padding

Padding is the space between the HTML content and the border. It gives internal spacing and helps to enhance the website.

 

CSS Padding

Padding is the space between the HTML content and the border. It gives internal spacing and helps to enhance the website.


Consider the image:


Css Padding



Here, the space between the content "Maxoncodes" and the border is the padding.


Syntax:

selector{
    padding: value;
}

Padding value can be used in any of the following methods:


Method 1

selector{
        padding: value;
}


Here, the padding value will apply equal padding to all sides (top, right, left, and bottom).

Example:


<html lang="en">
<head>
    <style>
        #p1{
            border: 2px solid purple;
        }
        #p2 {
            padding: 12px;

            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p id="p1">Maxoncodes (without padding)</p>
    <p id="p2">Maxoncodes (with padding)</p>
</body>
</html>


Css Padding


Note: Values can be specified in different units, such as pixels (px), em, rem, percentage (%), auto, etc.

If you are not familiar with borders, you can also check out the CSS borders tutorial.


Method 2

selector{
        padding: value1 value2;
}


Here, value 1 is the veritcal padding(y-axis) and value 2 is the horizontal padding (x-axis).


Example:

<html lang="en">
<head>
    <style>
        #p1{
            border: 2px solid purple;
        }
        #p2 {
            padding: 20px 50px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p id="p1">Maxoncodes (without padding)</p>
    <p id="p2">Maxoncodes (with padding)</p>
</body>

</html>


Css Padding


Method 3


selector{
        padding: value1 value2 value2 value4;
}


In this method, each value represents the padding of individual sides (top, right, bottom, left).


  • top: value1
  • right: value2
  • bottom: value3
  • left: value4


Example:

<html lang="en">
<head>
    <style>
        #p1{
            border: 2px solid purple;
        }
        #p2 {
            padding: 15px 30px 25px 50px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p id="p1">Maxoncodes (without padding)</p>
    <p id="p2">Maxoncodes (with padding)</p>
</body>
</html>


css padding


In this example, the padding on individual sides is


  • top: 10px
  • right: 20px
  • bottom: 25px
  • left: 50


Playaround:


You can also check the padding of each HTML element(s) using the inspect tool. Follow the steps.


  1. Right-click and click on inspect.
  2. Click on the computed styles sidebar.
  3. Toggle with the box model.


or follow the Image.


Css Padding