Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use the margin attribute in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the margin attribute in CSS.

Usage of margin attribute in CSS

The margin attribute is an abbreviated attribute that CSS uses to set all margin attributes in a declaration, and margin is the distance between block-level elements controlled by CSS, which is transparent and invisible.

The margin attribute contains marginleft: distance from the left element block (set distance to the left inner margin); margintop: distance from the top (top) element block (set distance from the top element block); marginright: distance from the right element block (set distance from the right element block); and marginbottom: bottom element block distance (set the distance from the lower (lower) element block). The two-dimensional construction diagram can be seen in the CSS attribute two-dimensional diagram.

Anatomical diagram of margin

Marginleft usage: margin-left:10px; means that the distance between the left element block and the left element block is 10 pixels, for example (margin-left:10%; distance from the left element block 10% distance)

Marginright usage: margin-right:10px; means a distance of 10 pixels from the element block on the right, such as a percentage (margin-right:10%; 10% distance from the element block on the right)

Margintop usage: margin-top:10px; means 10 pixels away from the top edge element block, such as a percentage (margin-top:10%; 10% distance from the top edge element block)

Marginbottom usage: margin-bottom:10px; means a distance of 10 pixels from the low edge element block, such as a percentage (margin-bottom:10%; 10% distance from the bottom edge element block)

Notice the "-" sign in the middle of the margin, set the distance value with ":" and give it a value, and end with ";", all in lowercase half-width letters.

If ◆ needs to set the value of margin from left to right, it can be realized by shorthand to optimize CSS.

For example, the abbreviations are:

Margin:10px; means that the distance between the upper and lower left and right elements is 10px (10 pixels), which is the same as margin-top:10px;margin-bottom:10px;margin-left:10px;margin-right:10px;.

Margin:5px10px; means that the distance between the upper and lower elements is 5px, and the distance between the left and right elements is 10px, which is equal to the abbreviation of margin-top:5px;margin-bottom:5px;margin-left:10px;margin-right:10px;.

In the sense of margin:5px6px7px;, the distance of the element block is 5px, the distance of the lower element block is 7PX, and the distance of the left and right element block is 6px, which is equal to the abbreviation of margin-top:5px;margin-bottom:7px;margin-left:6px;margin-right:6px;.

In the sense of margin:5px6px7px8px;, the element block is 5px, the right element block distance is 6px, the lower element block distance is 7px, and the left element block distance is 8px, which is equal to the abbreviation of margin-top:5px;margin-right:6px;margin-bottom:7px;margin-right:8px;.

The conversion method of margin:5px6px7px8px; is clockwise, that is, the figure:

Thank you for reading, these are the contents of "how to use the margin attribute in CSS". After the study of this article, I believe you have a deeper understanding of how to use the margin attribute in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.