子DIV設定margin-top影響父DIV位置
阿新 • • 發佈：2019-01-06
<pre name="code" class="html"><style type="text/css" media="screen"> *{margin: 0;padding: 0;} .pare{width: 600px;height: 600px;background-color: #ccc;} .child{width: 300px;height: 300px;background-color: red;margin: 50px;} </style> </head> <body> <div class="pare"> <div class="child"></div> </div> </body>
在設定子DIV的margin-top時候，如果與父DIV之間無任何元素的間隔（父div沒有上補白(padding-top)和上邊框(border-top)），那麼就會讓父DIV的位置受到影響。如圖：
解決辦法：
1.父DIV中新增：overflow:hidden;
2.在子DIV塊中用padding-top代替margin-top
3.為父DIV設定上邊框。（透明的邊框border-top:1px solid transparent;）