CSS Padding

Internal spacing (Padding) creates space between the content of an element and its border. Unlike external spacing (margin), which determines the distance between elements, internal spacing determines how much space the content has within its frame. With CSS, we have full control over spacing and can set values for each side separately: top, right, bottom, and left.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal Spacing Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        /* Basic frame for all elements */
        .frame {
    margin: 20px;
            background-color: #f0f0f0;
        }

        /* Your specific examples */
        .example-a {
    color: black !important;
            padding: 100px 122px 100px 122px;
            background-color: #ffebee;
        }

        .example-b {
    color: black !important;
            padding: 50px 200px;
            background-color: #e3f2fd;
        }

        /* Additional examples */
        .example-c {
    color: black !important;
            padding: 25px;
            background-color: #f1f8e9;
        }

        .example-d {
    color: black !important;
            padding-left: 50px;
            padding-right: 50px;
            background-color: #fff3e0;
        }

        .example-e {
    color: black !important;
            padding: 10%;
            background-color: #f3e5f5;
        }

        /* Text styling */
        p {
    margin: 0;
    font-family: Arial, sans-serif;
        }

        .description {
    font-size: 14px;
            color: black !important;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="frame">
        <p class="example-a">This element has padding 100px top and bottom, and 122px left and right</p>
        <p class="description">padding: 100px 122px 100px 122px;</p>
    </div>

    <div class="frame">
        <p class="example-b">This element has padding 50px top and bottom, and 200px left and right</p>
        <p class="description">padding: 50px 200px;</p>
    </div>

    <div class="frame">
        <p class="example-c">This element has equal padding on all sides (25px)</p>
        <p class="description">padding: 25px;</p>
    </div>

    <div class="frame">
        <p class="example-d">This element has padding only on the left and right sides (50px)</p>
        <p class="description">padding-left: 50px; padding-right: 50px;</p>
    </div>

    <div class="frame">
        <p class="example-e">This element has padding set in percentages (10%)</p>
        <p class="description">padding: 10%;</p>
    </div>
</body>
</html>

RESULT

Value	Description
% (Percentage)	Specifies spacing in percentages relative to the width of the parent element (not the contained one!). For example: padding: 5%;
Length	Specifies spacing in various units: px (pixels): padding: 20px; em (relative to font size): padding: 2em; rem (relative to root element font size): padding: 2rem; vw (percentage of viewport width): padding: 5vw; vh (percentage of viewport height): padding: 5vh;
Auto	The browser automatically calculates the spacing. For padding, it is usually treated as 0, unless specifically supported in certain contexts.
Initial	Sets the value to the default value according to the CSS specification (for padding, this is 0).
Inherit	The element inherits the padding value from its parent element (by default padding is not an inherited property but can be forced with this value).
Unset	Resets the value – since padding is not an inherited property, it behaves the same as initial (value 0).

Quick Reference: CSS Padding Properties

The table below shows all main properties for controlling internal spacing. Use them to set the space between content and the element's border. Examples in the "Example" column are ready for direct copying into your CSS.

Property	Example	Description
Basic Properties
`padding`	`padding: 10px;`	Shorthand property to set all four sides at once
`padding-top`	`padding-top: 20px;`	Sets the top internal spacing of an element
`padding-right`	`padding-right: 15px;`	Sets the right internal spacing of an element
`padding-bottom`	`padding-bottom: 10px;`	Sets the bottom internal spacing of an element
`padding-left`	`padding-left: 5px;`	Sets the left internal spacing of an element
Shorthand Syntaxes
`padding: 10px`	`padding: 10px;`	All four sides: 10px
`padding: 10px 20px`	`padding: 10px 20px;`	Top/Bottom: 10px, Left/Right: 20px
`padding: 10px 20px 30px`	`padding: 10px 20px 30px;`	Top: 10px, Left/Right: 20px, Bottom: 30px
`padding: 10px 20px 30px 40px`	`padding: 10px 20px 30px 40px;`	Top: 10px, Right: 20px, Bottom: 30px, Left: 40px
Other
`box-sizing: border-box`	`box-sizing: border-box;`	Includes padding and border in total width/height of element (recommended!)

CSS Padding

Quick Reference: CSS Padding Properties

Vadnica.org

Links

Support