css中盒模型外边距溢出问题及解决⽅法
⼀.描述
css设置样式时，⼀对⽗⼦元素。当⽗元素没有上边框（border-top）或者没有上内边距(padding-top)的时候，给⼦元素设置上外边距，会作⽤到⽗元素上。
例⼦：
<style type="text/css">
#parent{
width: 200px;
height: 200px;
background-color: #00f;
}
#child{
width: 100px;height: 100px;
background-color: #f00;
margin-top: 40px;
}
</style>
⼆.解决⽅法：
1.给⽗元素加上边框，弊端：增加了⽗元素实际占据⾼度
2.给⽗元素添加上内边距，弊端：增加了⽗元素实际占据⾼度
3.给⽗元素设置overflow:hidden/auto 元素如果想溢出显⽰，就冲突了
4.在该⼦元素的前⾯，添加⼀个空的元素，⽐如<table></table>（推荐使⽤）
效果：
<style type="text/css">
#parent{
width: 200px;
height: 200px; background-color: #00f;
}
#child{
width: 100px;height: 100px; background-color: #f00; margin-top: 40px;
}
</style>
</head>
table设置内边框<body>
<div id="parent">
<table></table>
<div id="child"></div>
</div>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。