CSS Padding

 

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