<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="background: #CCCCCC; width: 100px; height: 100px;">
<p style="margin-top: 12px;">123</p>
</div>
</body>
</html>
此时div的margin为0,但还是距离顶部有距离
原因是在css盒模型中规定:所有毗邻的两个或更多的盒元素的margin将会合并为一个margin共享之,毗邻的定义为:同级或者嵌套的盒元素,并且他们之间没有非空内容,padding或border分隔
解决办法:
1. 父级设置overflow:hidden
2. 绝对定位absolute
3. 父级设置padding或者border