Home > Developer > Web Develop
1, margin vertical collapse phenomenon .
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">. Box{width:100px;Height:100px;Background-color:Red;Margin-bottom:10px; }. Box2{Margin-top:30px;width:100px;Height:100px;background:Green; } </style> </Head> <Body> <Divclass= "box">1</Div> <Divclass= "Box2">2</Div> </Body></HTML>
Margin does not have this problem in the horizontal direction.
2, Margin-top relative to the parent box problem
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">. Father{width:100px;Height:100px;Background-color:Red;Padding-top:20px; }. Son{width:30px;Height:30px;Background-color:Yellow; /*margin-top:20px;*/ } </style> </Head> <Body> <Divclass= "Father"> <Divclass= "Son">son</Div> </Div> </Body></HTML>
Margin does not have this problem in the horizontal direction.
If you need to reach the relative to the parent box, offset downward, you can set the parent box padding-top instead of the child box set Margin-top.
Summary: Margin vertical direction as far as possible not to use, good at using the parent box padding layout.
3, a tag does not inherit the color property of the parent class
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">. Box ul Li{Color:Red; } </style> </Head> <Body> <Divclass= "box"> <ul> <Li><ahref="#">Python</a></Li> </ul> </Div> </Body></HTML>
Some pits of CSS
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
