如何解决浏览器显示margin-top的问题：有两种方法可以解决
第一种方法：给其父元素设置一个边框线.box{border: 1px solid #0000FF;}
但是这种方法不常用，因为边框一般主要是用于来调试代码的很少会给一个盒子设置边框。
第二种方法：不要使用子元素的margin而是要使用其父元素的padding.
.box{padding-top: 50px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 500px;
background-color: skyblue;
border: 1px solid #0000FF;
/* padding-top: 50px; */
}
.content{
width: 100px;
height: 100px;
background-color: #0f0;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
转载请注明：大灰牛博客 » 善于使用父元素的padding而不使用子元素的margin