1 、上下边距会叠加
-
!DOCTYPE html> <html> <head> <m<etacharset="UTF-8"> <title></title> <style> .box1{ width:500px; height:300px; background: blue; margin-bottom:30px; } .box2{ width:300px; height:100px; background:#ffff00; margin-top:30px; } </style> </head> <body> <divclass="box1"></div> <divclass="box2"></div> </body> </html>
2、父级包含子级的时候，子级的margin-top会传递给父级,可以使用父级的padding替代自己的margin。
-
<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title></title> <style> .box1{ width:500px; height:300px; background: blue; } .box2{ width:300px; height:100px; background:#ffff00; margin-top:30px; } </style> </head> <body> <divclass="box1"> <divclass="box2"></div> </div> </body> </html>
3、margin左右
margin-lefta：uto 偏右
margin-right：auto 偏左
margin：auto 水平居中