How to set li spacing in css

In CSS, you can use the margin attribute to set the li spacing. You only need to set "margin: value unit | percentage value" to the element. The margin property sets the width of all margins of an element, or sets the width of margins on each side.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page objects and model styles.

css You can use the margin abbreviation attribute to set the margins of the li tag to increase the li spacing. The margin abbreviation attribute sets all margin attributes in one statement. This attribute can have 1 to 4 values.

The default spacing between li tags is as follows:

• The first li
• The second li
• The third li

The effect is as follows:

css increases the li spacing:

li{
width: 300px;
height: 30px;
margin: 20px 0;
}

The effect is as follows:

margin shorthand attribute:

This shorthand attribute sets the width of all margins of an element, or sets the width of the margins on each side.

The vertically adjacent margins of block-level elements will be merged, while inline elements will not actually occupy the top and bottom margins. The left and right margins of inline elements are not merged. Likewise, the margins of floated elements are not merged. It is allowed to specify negative margin values, but use caution when using them.

Note: Negative values ​​are allowed.

Attribute value: auto The browser calculates the margins.

length specifies the margin value in specific units, such as pixels, centimeters, etc. The default value is 0px.

% Specifies margins as a percentage of the width of the parent element.

inherit specifies that margins should be inherited from the parent element.

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