LearnContact
Lesson 1017 min read

CSS Padding

Learn how CSS padding creates space inside elements using individual sides, shorthand properties, different units, practical examples, and browser output.

Introduction

In the previous lesson, you learned how CSS margin creates transparent space outside an element and separates it from surrounding elements.

Now you will learn how to create space inside an element using CSS padding.

Padding is one of the most important spacing properties in CSS. It controls the distance between an element content and its border.

CSS allows you to control the top, right, bottom, and left padding independently or combine them using shorthand syntax.

Select Element
↓
Choose Padding Side
↓
Set Padding Value
↓
Create Inner Space
↓
Position Content
↓
Render Final Element
Padding Creates Inner Space

Padding creates space between the content of an element and its border.

What is CSS Padding?

CSS padding is the space between an element content and its border.

It creates internal breathing room and prevents content from touching the edges of the element.

Basic Padding
.box {
    padding: 30px;
}
HTML
<div class="box">
    CSS Padding
</div>
CSS
.box {
    padding: 30px;

    background-color: #6c5ce7;
    color: white;
    border: 3px solid #4834d4;
}

The space between the text and the purple border is the padding area.

Padding Position
┌─────────────────────────────────────┐
│               BORDER                │
│   ┌─────────────────────────────┐   │
│   │                             │   │
│   │           PADDING           │   │
│   │                             │   │
│   │      ┌───────────────┐      │   │
│   │      │    CONTENT    │      │   │
│   │      └───────────────┘      │   │
│   │                             │   │
│   │           PADDING           │   │
│   │                             │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘
Padding Is Part of the Element

Unlike margin, padding is inside the element border and the element background extends through the padding area.

Why Do We Need Padding?

Without padding, content can touch the edges of an element and make the interface feel crowded.

Inner Space

Padding creates space between content and the element border.

Better Readability

Text becomes easier to read when it has breathing room.

Larger Buttons

Padding increases the visible and clickable area of buttons.

Better Cards

Cards use padding to keep content away from their edges.

Better Form Fields

Inputs use padding to make typed text comfortable to read.

Better Design

Consistent internal spacing creates clean and professional layouts.

Without Padding

  • Content touches the edges.
  • Buttons feel too small.
  • Cards appear crowded.
  • Text becomes uncomfortable to read.

With Padding

  • Content has breathing room.
  • Buttons are easier to click.
  • Cards feel balanced.
  • Text becomes easier to read.

Real-World Analogy

Imagine placing a valuable product inside a cardboard box.

The product represents the content, the protective material around the product represents padding, and the cardboard wall represents the border.

Adding more protective material increases the distance between the product and the box walls.

Box AnalogyCSS Concept
ProductContent
Protective materialPadding
Cardboard wallBorder
Space outside the boxMargin
Package Analogy
┌───────────────────────────────┐
│          BOX WALL             │
│                               │
│    Protective Material        │
│                               │
│       ┌─────────────┐         │
│       │   PRODUCT   │         │
│       └─────────────┘         │
│                               │
│    Protective Material        │
│                               │
└───────────────────────────────┘

Product              = Content
Protective Material  = Padding
Box Wall             = Border

Padding in the Box Model

Padding is the second layer of the CSS box model, positioned between the content and the border.

CSS Box Model
┌─────────────────────────────────────────┐
│                 MARGIN                  │
│                                         │
│    ┌───────────────────────────────┐    │
│    │            BORDER             │    │
│    │                               │    │
│    │    ┌─────────────────────┐    │    │
│    │    │       PADDING       │    │    │
│    │    │                     │    │    │
│    │    │    ┌───────────┐    │    │    │
│    │    │    │  CONTENT  │    │    │    │
│    │    │    └───────────┘    │    │    │
│    │    │                     │    │    │
│    │    └─────────────────────┘    │    │
│    │                               │    │
│    └───────────────────────────────┘    │
│                                         │
└─────────────────────────────────────────┘
LayerPurpose
ContentDisplays text, images, and other content
PaddingCreates space around the content
BorderCreates the visible edge of the element
MarginCreates space outside the element
Padding Is Inside the Border

Padding increases the space between content and border while remaining part of the visible element area.

The Four Padding Sides

Every rectangular element can have padding on four sides.

Four Padding Sides
                 padding-top
                      │
                      ▼
            ┌───────────────────┐
            │                   │
padding-left│      CONTENT      │padding-right
            │                   │
            └───────────────────┘
                      ▲
                      │
                padding-bottom
PropertyControls
padding-topSpace above the content
padding-rightSpace to the right of the content
padding-bottomSpace below the content
padding-leftSpace to the left of the content
paddingShorthand for all four sides
Separate Padding Properties
.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

1. Padding Top

The padding-top property creates space between the top border and the content.

Syntax
selector {
    padding-top: value;
}
HTML
<div class="box">
    Top Padding
</div>
CSS
.box {
    padding-top: 50px;

    background: #6c5ce7;
    color: white;
    border: 2px solid #4834d4;
}

The content moves downward because 50 pixels of internal space is created above it.

2. Padding Right

The padding-right property creates space between the content and the right border.

Syntax
selector {
    padding-right: value;
}
Right Padding
.box {
    padding-right: 80px;
}

The element contains additional internal space to the right of the text.

3. Padding Bottom

The padding-bottom property creates space between the content and the bottom border.

Syntax
selector {
    padding-bottom: value;
}
Bottom Padding
.box {
    padding-bottom: 50px;
}

4. Padding Left

The padding-left property creates space between the left border and the content.

Syntax
selector {
    padding-left: value;
}
Left Padding
.box {
    padding-left: 80px;
}
Common Text Spacing

Padding-left and padding-right are commonly used to keep text away from the horizontal edges of buttons, inputs, cards, and navigation links.

Padding Shorthand

The padding shorthand property allows multiple padding sides to be controlled using one declaration.

Longhand Version
.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}
Shorthand Version
.box {
    padding: 10px 20px 30px 40px;
}

Padding shorthand can accept one, two, three, or four values.

Number of ValuesMeaning
1 valueAll four sides
2 valuesVertical and horizontal
3 valuesTop, horizontal, bottom
4 valuesTop, right, bottom, left

One Value Syntax

When padding has one value, the same padding is applied to all four sides.

One Value
.box {
    padding: 30px;
}
One Value Pattern
padding: 30px;

Top    = 30px
Right  = 30px
Bottom = 30px
Left   = 30px

Two Value Syntax

When padding has two values, the first controls top and bottom, while the second controls left and right.

Two Values
.box {
    padding: 20px 50px;
}
Two Value Pattern
padding: 20px 50px;
           │     │
           │     └── Left and Right
           │
           └── Top and Bottom

Top    = 20px
Right  = 50px
Bottom = 20px
Left   = 50px
Very Common for Buttons

Two-value padding syntax is commonly used for buttons because vertical and horizontal spacing usually need different values.

Three Value Syntax

When padding has three values, the first controls the top, the second controls left and right, and the third controls the bottom.

Three Values
.box {
    padding: 10px 30px 50px;
}
Three Value Pattern
padding: 10px 30px 50px;
           │     │     │
           │     │     └── Bottom
           │     │
           │     └── Left and Right
           │
           └── Top

Top    = 10px
Right  = 30px
Bottom = 50px
Left   = 30px

Four Value Syntax

When padding has four values, they apply clockwise in Top, Right, Bottom, Left order.

Four Values
.box {
    padding: 10px 20px 30px 40px;
}
Four Value Pattern
padding: 10px 20px 30px 40px;
           │     │     │     │
           │     │     │     └── Left
           │     │     │
           │     │     └── Bottom
           │     │
           │     └── Right
           │
           └── Top
Remember TRBL

Four-value padding shorthand follows clockwise order: Top, Right, Bottom, Left.

Padding with Different Units

Padding can use different CSS length units.

UnitExampleCommon Use
pxpadding: 20pxPrecise fixed spacing
rempadding: 2remScalable component spacing
empadding: 1emSpacing relative to font size
%padding: 5%Container-relative spacing
vwpadding: 3vwViewport-relative spacing
Different Units
.one {
    padding: 20px;
}

.two {
    padding: 2rem;
}

.three {
    padding: 1.5em;
}

.four {
    padding: 5%;
}
Use a Consistent Spacing Scale

Modern projects often use reusable values such as 0.5rem, 1rem, 1.5rem, 2rem, and 3rem for consistent internal spacing.

Percentage Padding

Padding can use percentage values.

Percentage Padding
.box {
    padding: 5%;
}

Percentage padding is calculated relative to the width of the containing block.

Example Calculation
Parent Width = 800px

padding-left: 10%

10% of 800px = 80px

Calculated Left Padding = 80px
Vertical Percentage Padding Can Be Surprising

Traditional percentage padding, including top and bottom padding, is calculated from the width of the containing block rather than its height.

Padding and Background

An element background extends through the content and padding areas.

Background with Padding
.box {
    padding: 40px;

    background-color: #6c5ce7;
    color: white;
}

This is one of the main differences between padding and margin.

Padding Area

  • Inside the border.
  • Part of the element.
  • Displays the element background.
  • Can increase the clickable area.

Margin Area

  • Outside the border.
  • Separates the element.
  • Transparent.
  • Does not increase clickable area.

Padding and Element Size

With the default content-box sizing model, padding increases the total rendered size of an element.

Example
.box {
    width: 300px;

    padding-left: 20px;
    padding-right: 20px;
}
Width Calculation
Content Width       = 300px
Left Padding        = 20px
Right Padding       = 20px

Total Width
= 300px + 20px + 20px
= 340px

If borders are also present, their widths are added to the total size.

With Border
.box {
    width: 300px;

    padding: 20px;

    border: 5px solid black;
}
Complete Width Calculation
Content Width        = 300px
Left Padding         = 20px
Right Padding        = 20px
Left Border          = 5px
Right Border         = 5px

Total Width
= 300 + 20 + 20 + 5 + 5
= 350px
Padding Can Make Elements Larger

With box-sizing: content-box, declared width and height apply only to the content area. Padding and borders are added outside those dimensions.

Padding with box-sizing

The box-sizing property changes how the browser calculates the width and height of an element.

Content Box
.box {
    box-sizing: content-box;

    width: 300px;
    padding: 20px;
}
content-box Calculation
Declared Width = 300px

Content = 300px
Padding = 40px

Total = 340px
Before Borders
Border Box
.box {
    box-sizing: border-box;

    width: 300px;
    padding: 20px;
}
border-box Calculation
Declared Width = 300px

Total Element Width = 300px

Content + Padding + Border
fit inside the declared 300px width
Common Global Rule
* {
    box-sizing: border-box;
}
border-box Makes Sizing Easier

Many modern projects use box-sizing: border-box because padding and borders remain inside the declared width and height.

Padding in Buttons

Buttons commonly use vertical and horizontal padding to create comfortable clickable areas.

HTML
<button class="btn">
    Start Learning
</button>
CSS
.btn {
    padding: 12px 24px;

    background: #6c5ce7;
    color: white;

    border: none;
    border-radius: 8px;

    cursor: pointer;
}
Button Padding
padding: 12px 24px;
          │     │
          │     └── Left and Right
          │
          └── Top and Bottom
Padding Increases Clickable Area

Unlike margin, padding becomes part of the button surface and increases the area users can click or tap.

Padding in Cards

Cards use padding to keep their content away from the card edges.

HTML
<div class="card">
    <h3>Learn CSS</h3>

    <p>
        Master modern website styling.
    </p>
</div>
CSS
.card {
    padding: 30px;

    border: 1px solid #dfe6e9;
    border-radius: 12px;
}

The 30 pixels of padding creates equal internal space around all card content.

Padding in Forms

Form controls use padding to prevent text from touching their borders.

HTML
<input
    type="email"
    placeholder="Enter your email"
>
CSS
input {
    width: 100%;

    padding: 12px 16px;

    border: 1px solid #b2bec3;
    border-radius: 8px;

    box-sizing: border-box;
}
Use border-box with Full-Width Inputs

When an input uses width: 100%, box-sizing: border-box keeps its padding and border inside the available width.

Navigation links use padding to create larger clickable areas and comfortable spacing around text.

HTML
<nav>
    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">About</a>
</nav>
CSS
nav a {
    display: inline-block;

    padding: 12px 18px;

    color: white;
    text-decoration: none;
}

The clickable area includes the padding around each link text.

Padding vs Margin

Padding and margin both create space, but they work in different areas of the CSS box model.

FeaturePaddingMargin
PositionInside the borderOutside the border
Creates internal spacingYesNo
Creates external spacingNoYes
Background visibleYesNo direct element background
Increases clickable areaYesNo
Can use negative valuesNoYes
Can use autoNoYes
Can collapseNoVertical margins can
Padding
.box {
    padding: 30px;
}
Margin
.box {
    margin: 30px;
}

Use Padding When

  • Creating space inside a component.
  • Moving content away from borders.
  • Increasing button click area.
  • Creating card inner spacing.
  • Keeping background behind the space.

Use Margin When

  • Separating neighboring elements.
  • Creating space between sections.
  • Centering block elements.
  • Using auto alignment.
  • Creating intentional overlap.

Padding vs Gap

Padding creates space between a container edge and its content, while gap creates space between child items.

Padding
.container {
    padding: 30px;
}
Gap
.container {
    display: flex;
    gap: 20px;
}
Using Both
.container {
    display: flex;

    padding: 30px;
    gap: 20px;
}
PropertyCreates Space Between
PaddingContainer edge and content
GapChild items
MarginElement and surrounding elements

Complete Card Example

The following example combines padding, margin, borders, backgrounds, and button spacing in a practical course card.

HTML
<article class="course-card">
    <div class="course-badge">
        CSS
    </div>

    <h2>
        Master Modern CSS
    </h2>

    <p>
        Learn layouts, responsive design,
        Flexbox, Grid, and animations.
    </p>

    <a href="#">
        Start Learning
    </a>
</article>
CSS
.course-card {
    max-width: 420px;

    padding: 2rem;

    background: white;

    border: 1px solid #dfe6e9;
    border-radius: 16px;

    box-sizing: border-box;
}

.course-badge {
    display: inline-block;

    padding: 6px 12px;
    margin-bottom: 1rem;

    background: rgba(108, 92, 231, 0.12);
    color: #6c5ce7;

    border-radius: 20px;

    font-weight: bold;
}

.course-card h2 {
    margin: 0 0 1rem;
}

.course-card p {
    margin: 0 0 1.5rem;

    line-height: 1.7;
    color: #636e72;
}

.course-card a {
    display: inline-block;

    padding: 12px 24px;

    background: #6c5ce7;
    color: white;

    border-radius: 8px;

    text-decoration: none;
}
Padding RulePurpose
padding: 2remCreates inner space inside the card
padding: 6px 12pxCreates space inside the badge
padding: 12px 24pxCreates button size and clickable area

Browser Calculation Flow

The browser calculates padding as part of the CSS box model and layout process.

Read Padding Rules
↓
Resolve Length Units
↓
Calculate Percentage Values
↓
Determine Content Size
↓
Apply Padding
↓
Apply Border
↓
Calculate Final Box Size
↓
Render Element
Padding Calculation Process
CSS Padding Rules
        │
        ▼
Read Padding Values
        │
        ▼
Resolve px, rem, em, %
        │
        ▼
Calculate Content Size
        │
        ▼
Apply Top Padding
        │
        ▼
Apply Right Padding
        │
        ▼
Apply Bottom Padding
        │
        ▼
Apply Left Padding
        │
        ▼
Check box-sizing
        │
        ▼
Calculate Final Box
        │
        ▼
Render Element
box-sizing Changes Final Size Calculation

With content-box, padding is added to the declared dimensions. With border-box, padding is included inside the declared dimensions.

Real-World Applications

Buttons

Padding creates button size and comfortable clickable areas.

Cards

Padding keeps card content away from the edges.

Form Fields

Padding creates comfortable space around input text.

Navigation

Padding increases the clickable area of navigation links.

Containers

Padding keeps page content away from container edges.

Badges

Small vertical and horizontal padding creates compact labels.

Alerts

Padding gives messages enough internal breathing room.

Mobile Interfaces

Padding creates touch-friendly interactive controls.

Advantages

Internal Spacing

Padding creates controlled space inside elements.

Better Readability

Content becomes easier to read when it is not touching edges.

Larger Click Areas

Padding increases interactive surface area.

Background Coverage

Element backgrounds extend through the padding area.

Independent Sides

Each side can have a different padding value.

Compact Syntax

Shorthand controls all four sides in one declaration.

Responsive Design

Relative units allow padding to adapt to layouts.

Better Components

Consistent padding creates balanced and reusable components.

Common Beginner Mistakes

Confusing Padding with Margin

Padding creates space inside the border, while margin creates space outside the border.

Using Padding to Separate Elements

Padding changes internal spacing. Margin or gap is usually better for separating neighboring elements.

Using Margin for Inner Space

Margin cannot move content away from its own border. Use padding instead.

Forgetting TRBL Order

Four-value shorthand follows Top, Right, Bottom, Left.

Mixing Shorthand Order

Incorrect value order applies padding to unexpected sides.

Expecting Two Values to Mean Top and Bottom

With two values, the first controls vertical sides and the second controls horizontal sides.

Expecting Three Independent Sides

With three values, the middle value controls both left and right.

Trying to Use Negative Padding

CSS padding cannot use negative values.

Trying to Use padding: auto

Padding does not support the auto value.

Forgetting Padding Increases Size

With content-box, padding increases the total rendered width and height.

Width 100% Overflow

A width: 100% element can overflow when padding is added with content-box sizing.

Ignoring box-sizing

Understanding content-box and border-box prevents unexpected sizing problems.

Using Excessive Padding

Too much internal space can make components unnecessarily large.

Using Too Little Padding

Insufficient padding makes content feel crowded.

Random Padding Values

Unrelated spacing values create inconsistent component design.

Using Fixed Large Padding on Mobile

Large fixed padding can leave too little space for content on narrow screens.

Forgetting Background Coverage

The element background extends through the padding area.

Using Padding Between Flex Items

Gap is usually better for controlling space between flex or grid children.

Forgetting Percentage Behavior

Percentage padding is calculated relative to the containing block width.

Making Buttons Large with Margin

Margin does not increase clickable area. Use padding to create larger interactive controls.

Best Practices

  • Use padding for space inside an element.
  • Use margin for space outside an element.
  • Understand where padding sits in the CSS box model.
  • Use padding-top for space above content.
  • Use padding-right for space to the right of content.
  • Use padding-bottom for space below content.
  • Use padding-left for space to the left of content.
  • Use shorthand when multiple sides share related values.
  • Use one value when all four sides are identical.
  • Use two values for vertical and horizontal padding.
  • Use three values only when the pattern remains clear.
  • Use four values when every side requires individual control.
  • Remember the TRBL order: Top, Right, Bottom, Left.
  • Keep shorthand declarations readable.
  • Use longhand properties when they communicate intent more clearly.
  • Use padding: 0 to remove internal spacing when necessary.
  • Do not use negative padding because CSS does not support it.
  • Do not use auto as a padding value.
  • Use consistent padding values across similar components.
  • Create a reusable spacing scale.
  • Prefer rem units for scalable component spacing.
  • Use px when precise fixed spacing is appropriate.
  • Use em when spacing should scale with the element font size.
  • Use percentages carefully.
  • Remember that percentage padding is based on containing block width.
  • Use box-sizing: border-box for predictable element sizing.
  • Understand the default content-box sizing model.
  • Remember that content-box adds padding outside declared width.
  • Remember that border-box includes padding inside declared width.
  • Use a global border-box rule when appropriate for the project.
  • Use padding to increase button clickable areas.
  • Use enough vertical padding for comfortable controls.
  • Use enough horizontal padding so button text does not feel crowded.
  • Keep similar buttons visually consistent.
  • Use padding inside cards.
  • Keep card padding proportional to card size.
  • Use smaller padding for compact cards.
  • Use larger padding for spacious feature cards.
  • Use padding inside form controls.
  • Use border-box with width: 100% form fields.
  • Keep input text away from borders.
  • Use consistent padding across related inputs.
  • Use padding for navigation link click areas.
  • Do not rely only on text size to make links easier to click.
  • Use padding for badges and labels.
  • Use smaller padding for compact UI elements.
  • Use larger padding for primary interactive elements.
  • Use padding on page containers to prevent edge-to-edge content.
  • Reduce container padding on narrow screens when necessary.
  • Use responsive values for major layout containers.
  • Use CSS variables for reusable padding values.
  • Avoid random padding values.
  • Keep vertical padding consistent.
  • Keep horizontal padding consistent.
  • Use padding to communicate component density.
  • Use smaller padding for dense interfaces.
  • Use larger padding for spacious interfaces.
  • Do not use padding when gap is the correct property.
  • Use gap between flex items.
  • Use gap between grid items.
  • Use padding between a container edge and its children.
  • Use margin between separate standalone components.
  • Understand the difference between padding, margin, and gap.
  • Remember that backgrounds cover the padding area.
  • Use padding when the background should fill the space.
  • Use margin when the space should remain outside the element.
  • Use padding to increase touch target size.
  • Keep mobile controls comfortable to tap.
  • Avoid extremely small clickable areas.
  • Test buttons with long text.
  • Test cards with different content lengths.
  • Test inputs with different font sizes.
  • Test layouts on narrow screens.
  • Check for overflow after adding padding.
  • Check box-sizing when width becomes unexpected.
  • Inspect computed padding using browser developer tools.
  • Check whether another CSS rule overrides the padding.
  • Use browser tools to visualize the box model.
  • Keep component padding predictable.
  • Keep component padding reusable.
  • Keep component padding responsive.
  • Keep internal spacing visually balanced.
  • Use larger padding between container edges and important content.
  • Use smaller padding inside compact controls.
  • Avoid excessive empty space.
  • Avoid overcrowded content.
  • Maintain consistent visual rhythm.
  • Use padding values from a defined design system.
  • Prefer maintainable spacing rules over one-time fixes.
  • Keep padding purposeful.
  • Keep padding consistent.
Padding Defines Component Comfort

Good padding gives content enough breathing room without making the component unnecessarily large.

Frequently Asked Questions

What is CSS padding?

CSS padding is the space between an element content and its border.

Where is padding located in the box model?

Padding is located between the content and the border.

What are the four padding properties?

They are padding-top, padding-right, padding-bottom, and padding-left.

What does padding-top do?

It creates space between the top border and the content.

What does padding-right do?

It creates space between the content and the right border.

What does padding-bottom do?

It creates space between the content and the bottom border.

What does padding-left do?

It creates space between the left border and the content.

What is padding shorthand?

The padding property is shorthand for controlling multiple padding sides in one declaration.

What does padding: 20px mean?

It applies 20 pixels of padding to all four sides.

What does padding: 20px 40px mean?

It applies 20 pixels to top and bottom and 40 pixels to left and right.

What does padding: 10px 20px 30px mean?

It applies 10 pixels to the top, 20 pixels to left and right, and 30 pixels to the bottom.

What does padding: 10px 20px 30px 40px mean?

It applies values to top, right, bottom, and left in clockwise order.

What does TRBL mean?

TRBL means Top, Right, Bottom, Left, the order used by four-value CSS shorthand.

Can padding use negative values?

No. CSS padding cannot use negative values.

Can padding use auto?

No. Unlike margin, padding does not support the auto value.

Does padding increase element size?

With the default content-box sizing model, padding increases the total rendered size of the element.

How does border-box affect padding?

With box-sizing: border-box, padding and borders are included inside the declared width and height.

Does the background cover the padding area?

Yes. The element background extends through the padding area.

Does padding increase clickable area?

Yes. Padding is part of the element and can increase the clickable or tappable area.

What is the difference between padding and margin?

Padding creates space inside the border, while margin creates space outside the border.

What is the difference between padding and gap?

Padding creates space between a container edge and its content, while gap creates space between child items.

Can padding use percentages?

Yes. Percentage padding is calculated relative to the width of the containing block.

Can padding use rem units?

Yes. Rem units are commonly used for scalable and consistent component spacing.

Why does width: 100% overflow after adding padding?

With content-box sizing, padding is added outside the declared width. Using box-sizing: border-box usually prevents this problem.

Should buttons use margin or padding for size?

Buttons should use padding to create internal space and increase the clickable area.

Should cards use padding?

Yes. Cards commonly use padding to keep their content away from the card edges.

Should form inputs use padding?

Yes. Padding keeps typed text away from input borders and makes controls more comfortable to use.

Does padding collapse like margin?

No. Padding does not collapse.

What is a good global box-sizing rule?

Many projects use * { box-sizing: border-box; } to make element sizing easier to predict.

What comes after CSS padding?

The next lesson covers the CSS Box Model and explains how content, padding, borders, margins, width, height, and box-sizing work together to determine the final size of an element.

Key Takeaways

  • Padding creates space between content and border.
  • Padding is inside the element border.
  • The element background extends through the padding area.
  • Padding is part of the CSS box model.
  • padding-top creates space above content.
  • padding-right creates space to the right of content.
  • padding-bottom creates space below content.
  • padding-left creates space to the left of content.
  • The padding shorthand controls multiple sides.
  • One value applies to all four sides.
  • Two values control vertical and horizontal padding.
  • Three values control top, horizontal, and bottom padding.
  • Four values follow Top, Right, Bottom, Left order.
  • TRBL helps remember four-value shorthand order.
  • Padding can use px, rem, em, %, and other length units.
  • Percentage padding is based on the containing block width.
  • Padding cannot use negative values.
  • Padding cannot use auto.
  • With content-box, padding increases the total element size.
  • With border-box, padding is included inside declared dimensions.
  • box-sizing: border-box makes element sizing easier to predict.
  • Padding increases the clickable area of buttons and links.
  • Cards use padding for internal breathing room.
  • Inputs use padding to keep text away from borders.
  • Navigation links use padding to create larger clickable areas.
  • Padding creates internal spacing.
  • Margin creates external spacing.
  • Gap creates space between child items.
  • Padding does not collapse.
  • Consistent padding creates balanced and reusable components.

Summary

CSS padding creates space between an element content and its border.

The padding-top, padding-right, padding-bottom, and padding-left properties control the four individual sides.

The padding shorthand property can accept one, two, three, or four values.

Four-value padding shorthand follows clockwise Top, Right, Bottom, Left order.

Unlike margin, padding is part of the element and the background extends through the padding area.

Padding can increase the clickable area of buttons, links, and other interactive elements.

With the default content-box sizing model, padding increases the total rendered size of an element.

The border-box sizing model includes padding and borders inside the declared width and height, making layouts easier to control.

Padding is commonly used inside cards, buttons, form fields, navigation links, page containers, badges, and alerts.

Padding creates space between a container edge and its content, while gap creates space between child items and margin creates space outside an element.

Good padding design uses consistent spacing values to create comfortable, readable, balanced, and reusable components.

In the next lesson, you will learn the CSS Box Model and understand how content, padding, borders, margins, width, height, and box-sizing work together to determine the final size of every element.