css中margin值和垂直外边距重叠的示例分析

tangjin

作者

这篇文章主要介绍了css中margin值和垂直外边距重叠的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的!

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
*{margin:0;padding:0;}
.box1,.box2{
width:200px;
height:200px;
}
.box1{
background-color:#f90;
margin-bottom:20px;
}
.box2{
background-color:aqua;
margin-top:50px;
}
</style>
</head>
<body>
<divclass="box1"></div>
<divclass="box2"></div>
</body>
</html>