Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use the margin attribute of CSS". In the daily operation, I believe that many people have doubts about how to use the margin attribute of CSS. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "how to use the margin attribute of CSS". Next, please follow the editor to study!

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 margin left: distance from the left element block (set distance to the left inner margin); margin top: distance from the top (top) element block (set distance from the top element block); margin right: distance from the right element block (set distance from the right element block); margin bottom: distance from the bottom element block (sets 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

Margin left usage: margin-left:10px; means that the distance between the left element block and the left element block is 10 pixels, which can be followed by a percentage, such as (10% distance between margin-left:10%; and the left element block) css margin-left tutorial

Margin right 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)

Margin top usage: margin-top:10px; means that the distance from the top edge element block is 10 pixels, which can be followed by a percentage, such as (margin-top:10%; 10% distance from the top edge element block) css margin-top

Margin bottom usage: margin-bottom:10px; means a distance of 10 pixels from the low edge element block, which can be followed by a percentage such as (10% distance between margin-bottom:10%; and the bottom edge element block) css margin-bottom

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 you need to set the value of margin from left to right, you can do it in 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:5px 10px; it 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;.

Margin:5px 6px 7px; in meaning, the distance of the element block is 5px, the distance of the lower element block is 7PX, and the distance between the left and right element block is 6px, which is equivalent to the abbreviation of margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px;.

Margin:5px 6px 7px 8px; in meaning, 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:5px 6px 7px 8px; is clockwise:

Attribute Transformation Diagram of margin

The above is the attributes and usage of margin summarized by the div css website. The use of margin is the same as padding.

At this point, the study on "how to use the margin attribute of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.