CSS padding: The Padding Property

The CSS padding property adds space within an element, between its content and its border. By adjusting the padding, you can create custom layouts and make web pages look appealing.

How to Use padding in CSS

You can apply padding to all sides using the padding shorthand property. However, you can also set the padding for individual sides using their specific properties.

/* Shorthand for all four sides */
element {
  padding: 10px;
}

/* Individual sides */
element {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 20px;
}

• padding: Applies padding to all four sides of an element.
• padding-top, padding-right, padding-bottom, padding-left: Specifies padding values for each side individually.

When to Use padding in CSS

Improving Readability

You can add padding inside buttons, input fields, or text areas to enhance readability.

button {
  padding: 10px 20px;
  font-size: 16px;
}

Creating Layout Consistency

By applying consistent padding values across similar elements, you can keep your web page visually appealing.

.container > p {
  padding-left: 15px;
}

Separating Content

Padding can help you separate text from other content, such as images or borders.

.article {
  padding: 20px;
  border: 1px solid #ccc;
}

Examples of Using padding in CSS

Form Styling

A web app might use padding to improve form input styling, creating consistent spacing within each form field.

.form-input {
  padding: 8px 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;

<form>
  <input type="text" class="form-input" placeholder="Name">
  <input type="email" class="form-input" placeholder="Email">
  <button type="submit">Submit</button>
</form>

Card Layout

An online store might use padding within product cards to create an attractive card layout.

.card {
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

<div class="card">
  <h3>Product Title</h3>
  <p>Description of the product...</p>
  <button>Buy Now</button>
</div>

Navigation Bar

On a company website, padding within navigation items might help make a navbar easier to interact with.

.nav-item {
  padding: 15px 30px;
  color: white;
  background-color: #007bff;
  text-decoration: none;
}

<nav>
  <a href="#home" class="nav-item">Home</a>
  <a href="#about" class="nav-item">About Us</a>
  <a href="#services" class="nav-item">Services</a>
  <a href="#contact" class="nav-item">Contact</a>
</nav>

Learn More About CSS padding

CSS Margin vs. Padding

Margin and padding are key elements of the CSS box model. While padding is the space within an element, margin creates space around an HTML element. Padding expands the content area inward. Margin, on the other hand, expands the space around an element, creating separation between adjacent elements.

.box {
  padding: 20px; /* Space inside the box */
  margin: 30px; /* Space outside the box */
  border: 2px solid black;
}

Advanced Padding Techniques

You can maintain layouts across different screen sizes by setting the padding to a percentage of a container's width.

/* Responsive padding */
.container {
  padding: 5%; /* Responsive based on the container size */
}

To ensure layouts adapt smoothly across devices, you can adjust padding based on screen sizes.

/* Adjusting padding based on screen size using media queries */
.container {
  padding: 20px;
}

@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}

Inheriting Padding

By default, child elements don't inherit the padding value of their parent elements. However, you can explicitly set padding to inherit for consistent styling.

.parent {
  padding: 20px;
}

.child {
  padding: inherit;

<div class="parent">
  <div class="child">Child content with inherited padding.</div>
</div>

Using the Padding Shorthand

The CSS padding shorthand property can accept multiple values at the same time. Using the shorthand syntax, you can set specific padding for each side of an HTML element.

By setting padding to a single value, you can sets the same padding on all four sides.

/* Uniform padding */
p {
  padding: 20px;
}

When you use two values, the first value sets the top and bottom padding (vertical padding). The second value, then, sets the left and right padding (horizontal padding).

/* Vertical | Horizontal */
div {
  padding: 10px 20px;
}

With three values, the first value sets the top padding, the second sets the horizontal padding, and the third sets the bottom padding.

/* Top | Horizontal | Bottom */
button {
  padding: 5px 15px 10px;
}

Finally, with all four values, each value represents one side of the element in clockwise order: top, right, bottom, and left.

/* Top | Right | Bottom | Left */
header {
  padding: 10px 20px 15px 5px;
}