How to Use shorthand padding property with two values in CSS

Padding is a CSS property that allows you to add space around an element.

This can be useful for creating visual spacing between elements on a web page.

The shorthand padding property allows you to set the padding for all four sides of an element at once.

However, it can also be used with two values to set the padding for the top and bottom, and the left and right sides of an element separately.

In this CSS tutorial, we will discuss how to use the shorthand padding property with two values in CSS.

Setting Padding for Top and Bottom, and Left and Right

The shorthand padding property can take up to four values, but it can also be used with only two values.

When using two values, the first value sets the padding for the top and bottom of the element, and the second value sets the padding for the left and right sides.

For example, the following CSS sets 20 pixels of padding on the top and bottom and 10 pixels of padding on the left and right sides of an element with the class “example”:

example {
  padding: 20px 10px;
}

Using Shorthand Padding for Responsive Design

The shorthand padding property can also be used in combination with media queries to create responsive designs.

For example, you could use a larger padding on larger screens and a smaller padding on smaller screens.

example {
  padding: 20px 10px;
}

@media (min-width: 768px) {
  .example {
    padding: 30px 20px;
  }
}

In the example above, the padding is set to 20 pixels on top and bottom, and 10 pixels on the left and right for screens smaller than 768 pixels wide.

But, When the screen is larger than 768 pixels wide, the padding is set to 30 pixels on top and bottom, and 20 pixels on the left and right.