🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS Padding

Control the inner spacing of elements. Master the box model and layout with padding.

padding.css
/* Padding Example */
.card {
border: 1px solid black;
padding: 20px;
}
/* Result: Spacing inside */
Content Area
padding.css
1 / 8
📦

Tutor:Padding is the space between an element's content and its border. Think of it as the internal cushion of a box.


Box Model Mastery

Unlock nodes by learning spacing and layout.

Concept 1: What is Padding?

Padding is the space between the content of an element and its border. Unlike margin, which creates space *outside* the border, padding creates space *inside*.

System Check

Where is padding applied in the Box Model?

Community Holo-Net

Share Layout Tips

Created effective layouts using padding? Share your CodePens and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Padding Property

Author

Pascual Vila

Frontend Instructor.

The padding property is a core component of the CSS Box Model. It defines the innermost spacing between an element's content and its border. Unlike margin, which pushes other elements away, padding expands the internal size of the element itself.

The Box Model Context

In the standard box model, adding padding increases the total width and height of the element. For example, a 100px wide box with 20px of padding on all sides will actually render as 140px wide on screen, unless you use box-sizing: border-box.

Shorthand Syntax

Padding can be set using 1, 2, 3, or 4 values:

  • 1 Value: All 4 sides (e.g., 10px).
  • 2 Values: Vertical (Top/Bottom) then Horizontal (Left/Right).
  • 4 Values: Clockwise starting from Top (Top, Right, Bottom, Left).

Padding vs Margin

Padding: Internal space. Takes on the background color/image of the element. Included in the click area.

Margin: External space. Always transparent. Creates distance between this element and neighbors.

Best Practices

Use padding to give your text and content "breathing room" so it doesn't touch the borders. Consistent padding (e.g., utilizing CSS variables) is key to a polished UI design.

Padding Glossary

Padding
The space between the element's content and its border.
Box Model
A box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
Shorthand Property
A CSS property that lets you set the values of multiple other CSS properties simultaneously (e.g., setting top, right, bottom, left in one go).
Content Area
The area where text and images appear, immediately surrounded by the padding.