Loading

Padding

  • The padding property is used to specify the space between the content of an element and its border.
  • Padding property can be applied to various HTML elements like divs, paragraphs, and headings.

Syntax:

body {
    padding: value;
}

Ways to set padding property:

Setting Padding for All Sides Equally:

selector {
padding: 10px; /* 10 pixels of padding on all sides */
}

Setting Padding for Individual Sides:

selector {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

Shorthand Syntax for All Sides:

shorthand notation is used to set padding for all sides at once in the order of top, right, bottom, and left:

selector {
padding: 20px 20px 10px 30px; /* top, right, bottom, left */
}

Padding Properties:


Padding Values:


Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            background-color: greenyellow;
        }

        p.padding {
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 150px;
            padding-left: 200px;
        }
    </style>
</head>

<body>
    <p> paragraph with no specified padding.</p>
    <p class="padding"> paragraph with specified paddings.</p>
</body>

</html>

Output:


Difference Between Padding and Margin

 

FEATURESMARGINPADDING
DefinitionSpace outside the element's border.Space inside the element's border, between the border and the content.
Affects LayoutYes, adds space outside the element, affecting the layout around it.Yes, adds space inside the element, affecting the internal layout.
PositionPositioned outside the element's border.Positioned inside the element's border.
Negative ValuesAllowed, can create overlapping elements.Not allowed, values must be non-negative.
Impact on Box ModelAffects the outer space of the element, impacting its position relative to other elements.Increases the size of the element's box, affecting its content area.
Collapsing BehaviorAdjacent vertical margins may collapse.Padding does not collapse.
Impact on Background ColorDoes not affect the background color of the element.Affects the background color of the element (background color extends to the padding area).
UsageUsed to create space between elements.Used to create space within an element, providing spacing around the content.
Propertiesmargin-top, margin-right, margin-bottom, margin-leftpadding-top, padding-right, padding-bottom, padding-left