Home > Developer > Web Develop
CSS's margin usage is detailed:
recommendation : As far as possible handwriting code, can effectively improve the learning efficiency and depth.
The margin property is used very frequently in web pages, so here is a detailed description of the use of this property.
This property is used to define the margin of the object, also known as the outer padding, so-called margin is a white space around the outside of the border. You can define the margins of a given position, up or down, individually. The code example is as follows:
Example one:
The child Div has no margin:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">. Parent{width:400px;Height:400px;Border:1px solid Red;}. Children{width:100px;Height:100px;Border:1px solid Green;}</style></Head><Body><Divclass= "Parent"> <Divclass= "Children"></Div></Div></Body></HTML>
Example two:
Set the left margin after the sub div:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">. Parent{width:400px;Height:400px;Border:1px solid Red;}. Children{width:100px;Height:100px;Border:1px solid Green;Margin-left:20px;}</style></Head><Body><Divclass= "Parent"> <Divclass= "Children"></Div></Div></Body></HTML>
The above code sets the left margin of the Sub Div, so that it is clear to understand the meaning of the margin.
Of course we can set the margin of the respective azimuth through Margin-right, Margin-top and Margin-bottom. Although it is clear that the margin is set by the outer property of the respective azimuth, it is also slightly redundant, so you can use the margin property to set the margin of multiple bearings at once. The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">. Parent{width:400px;Height:400px;Border:1px solid Red;}. Children{width:100px;Height:100px;Border:1px solid Green;margin:20px 30px 50px 50px;}</style></Head><Body><Divclass= "Parent"> <Divclass= "Children"></Div></Div></Body></HTML>
The four margins of the object are set once in the code above by using the margin property.
The following are the features of the margin attribute value:
If you provide all four parameter values, the top, right, bottom, and left orders are used for four edges.
If only one is provided, it will be used for all four sides.
If two is provided, the first one is for top, bottom, and second for left and right.
If three is supplied, the first one is used on, the second one is for left, right, and the third is for the next.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4657
For more information, refer to: http://www.softwhy.com/divcss/
CSS Margin Usage Detailed
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
