How to use padding attribute in css

In CSS, the padding attribute is used to set the padding of an element. This means it defines the space between the element's content and its border. The basic syntax is "padding: value;".

#In CSS, the padding attribute is used to set the padding of an element. This means it defines the space between the element's content and its border.

Basic syntax:

padding: value;

The value here can have the following forms:

Length value: for example, px (pixel), em (unit relative to the current font size ), rem (unit relative to the font size of the root element), etc. For example: padding: 10px;

Percentage: for example 10%. This sets the padding relative to the width of the element. For example: padding: 10%;

Transparency: for example transparent. This will make the padding completely transparent.

Four values:

You can also set the padding on the four sides of the element separately, as shown below:

padding: top right bottom left;

Here, top sets the padding on the top Spacing, right sets the right padding, bottom sets the bottom padding, and left sets the left padding.

Example:

div {  
  padding: 10px;      /* 设置所有四个边的内边距为10px */  
}  
  
.container {  
  padding: 20px 15px;  /* 设置上边和下边的内边距为20px，左边和右边的内边距为15px */  
}

Note that the element's background color extends into its padding area, but not into the border. If the element has no borders, the background color extends into the element's content area.

The above is the detailed content of How to use padding attribute in css. For more information, please follow other related articles on the PHP Chinese website!