How to use the margin outer margin attribute in css

This article is about how to use the margin outer margin attribute in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Code example of the specific usage of the margin attribute in css, that is, the css outer margin attribute:

The margin property in css uses the example .demo {width:300px;height:100px; background-color:#ccccff;} .demo1 {margin-left:50px; margin-top:50px; margin-bottom:50px; width:300px;height:100px; background-color:#b2ecef;} .demo2 {width:300px;height:100px; background-color:#94ef9a } .demo1p {margin-left:50px;}

The margin value is not set for this div block

The margin value is set for the div block, and the margin value is also set for the text.

The margin value is not set for this div block

The above code is rendered in the browser as shown below:

From the figure, we can see that the spacing between div blocks changes after setting the margin value for the element. Div block demo1 because after setting the style attribute of margin-left, the element moves 50 pixels from the left side of the browser, after setting margin-top, the element distance from the div block above also moves 50 pixels, and then adds the margin-bottom style attribute, which moves 50 pixels from the upper frame of the div block below, thus the div block demo1 produces the upper left and lower outer margin. At the same time, after we add the style attribute of margin-left to the second paragraph of text, the text moves 50 pixels from the left border of div in demo1 and produces an outer margin.

The value of margin can be selected from top to bottom, of course, if we directly add the attribute margin:50px; to div, we can also show the above effect. Because when you add only one value to margin by default, it is equivalent to the four-sided distance is the same value. Or if we add margin:50px50px50px50px;, this is equivalent to the subdivision of margin-top, margin-right, margin-bottom and margin-left; in css. By default, the outer margin of the upper, right, lower and left is clockwise.

Thank you for reading! This is the end of this article on "how to use the margin margin attribute in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!