In the design of the Web page, we use the box model, the content is as follows:
The entire Web page is a large box of small boxes, small boxes and smaller boxes to achieve. However, in the design of Web pages are always confused about the use of margin and padding, here specifically to explore.
2.margin 1.margin-topOnly the block element has margin-top, the inline element is not margin-top. Margin-top is calculated as a reference point with the lower bounds of the sibling element or the parent element with the top border.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"><title>Driving School Registration</title><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><!--[If Lt IE 9]><script src= "js/html5shiv.min.js" ></script><script src= "Js/respond.min.js" > </script><! [EndIf] -<styletype= "Text/css">Body{Min-width:1024px;margin:0px Auto;font-family:' Microsoft Ya Black '; }. Fdiv{width:200px;Height:200px;background:#ccc;margin:0;padding:0; }. Cdiv{width:100px;Height:100px;background:#FFF7DC;Margin-top:20px;Border:1px solid Black; }a{Border:1px solid Black; }</style></Head><Body><Divclass= "Fdiv"> <Divclass= "Cdiv"> </Div><Div></Body></HTML>
Since the beige part of the DIV can not find a reference point, we found that the results are very wonderful, the body on the upper boundary as a reference point.
. fdiv{ width:200px; height:200px; background: #ccc; margin:0; padding:0; border-top:1px solid black; }We found that once the parent element has the upper bounds set, the margin-top is displayed as normal.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"><title>Driving School Registration</title><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><!--[If Lt IE 9]><script src= "js/html5shiv.min.js" ></script><script src= "Js/respond.min.js" > </script><! [EndIf] -<styletype= "Text/css">Body{Min-width:1024px;margin:0px Auto;font-family:' Microsoft Ya Black '; }. Fdiv{width:200px;Height:200px;background:#ccc;margin:0;padding:0;Border:1px solid Black; }. Cdiv{width:100px;Height:100px;background:#FFF7DC;Margin-top:20px;Border:1px solid Black; }a{Border:1px solid Black; }</style></Head><Body><Divclass= "Fdiv"> <a>Ffasdfasdfasfdafdasdf</a> <Divclass= "Cdiv"> </Div><Div></Body></HTML>
The margin-top of the beige section Div is the reference line in the lower bounds of the a tag to calculate the downward offset (20px).
Understanding of margin
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
