What represents a gap in css

In CSS, the padding attribute represents a gap. The padding attribute is used to define the space between the element border and the element content, that is, the top, bottom, left, and right inner margins; when the element's padding inner margins are cleared, all The released area will be filled with the element's background color; the padding property can be used alone to change the top, bottom, left, and right padding.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

What represents a gap in css?

<strong>padding</strong>

The CSS gap property (padding) is used to set the distance from the element content to the element border.

CSS padding is a shorthand property that defines the space between the element border and the element content, that is, the top, bottom, left, and right padding.

<strong>padding</strong>

When the padding of an element is cleared, the freed area will be filled with the element's background color.

Use the padding attribute alone to change the top, bottom, left, and right padding.

Possible values

length defines a fixed padding (pixels, pt, em, etc.)

% is defined using a percentage value A padding

Padding - single-sided padding attribute

In CSS, it can specify different padding on different sides:

Example

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Top padding is 25px

Right padding is 50px

Bottom padding is 25px

Left padding is 50px

Padding- Shorthand properties

To shorten the code, it is possible to specify all the populated properties in one property.

This is the so-called shorthand attribute. The shorthand property for all padding properties is padding:

Instance

padding:25px 50px;

Padding property, which can have one to four values.

padding:25px 50px 75px 100px;

The top padding is 25px

The right padding is 50px

The bottom padding is 75px

The left padding is 100px

 padding:25px 50px 75px;

The top padding 25px

The left and right padding is 50px

The bottom padding is 75px

  padding:25px 50px;

The top and bottom padding is 25px

The left and right padding is 50px

  padding:25px;

All padding is 25px

Recommended learning: "css video tutorial"

The above is the detailed content of What represents a gap in css. For more information, please follow other related articles on the PHP Chinese website!