Home > Web Front-end > Front-end Q&A > What does margin mean in css?

What does margin mean in css?

藏色散人
Release: 2023-01-06 11:13:10
Original
10063 people have browsed it

Margin in css is a shorthand attribute, which can set all margin attributes in one declaration; this shorthand attribute sets the width of all margins of an element, or sets the width of the margins on each side.

What does margin mean in css?

#The operating environment of this article: Windows 7 system, css3 version, Dell G3 computer.

margin shorthand property sets all margin properties in one declaration. This attribute can have 1 to 4 values.

Description

This shorthand property sets the width of all margins of an element, or sets the width of 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.

Example 1

margin:10px 5px 15px 20px;
Copy after login

The top margin is 10px

The right margin is 5px

The bottom margin is 15px

The left margin The margin is 20px

Example 2

margin:10px 5px 15px;
Copy after login

The top margin is 10px

The right and left margins are 5px

The bottom margin is 15px

Example 3

margin:10px 5px;
Copy after login

The top and bottom margins are 10px

The right and left margins are 5px

Example 4

margin:10px;
Copy after login

All 4 margins are 10px

Recommended study: "css video tutorial"

The above is the detailed content of What does margin mean in css?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template