css設置時父元素隨子元素margin值移動
阿新 • • 發佈：2017-06-12
float -h overflow pad 方法 htm 絕對定位 padding mar
父元素的盒子包含一個子元素盒子，給子元素盒子一個垂直外邊距margin-top,父元素盒子也會往下走margin-top的值，而子元素和父元素的邊距則沒有發生變化。
HTML，CSS：
<div class="box1">
<div class="box2">
<div class="content">
<div class="margin">123</div>
</div>
</div>
</div>
*{padding:0; margin:0;}
.box1{ width:600px; height:1042px; margin:0 auto; background:#ccc; overflow:hidden;}
.box2{ width:600px; height:1042px; background:#000; overflow:hidden;}
.content{ width:600px; height:1042px; overflow:hidden;}
.margin{ width:400px; height:30px; line-height:30px; text-align:center; margin:20px; background:#f00; overflow:hidden;}解決方法：
1、修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；常用）
2、為父元素添加overflow：hidden；樣式即可（完美）
3、為父元素或者子元素聲明浮動（float：left；可用）
4、為父元素添加border（border:1px solid transparent可用）
5、為父元素或者子元素聲明絕對定位
css設置時父元素隨子元素margin值移動