如何解決子div設定margin-top時影響父div的margin-top
阿新 • • 發佈：2018-12-29
測試程式碼如下：
<!DOCTYPE html>
<html><head>
<title></title>
<style type="text/css">
.container{width: 50%;margin: 0px auto;background-color: #919191;overflow:hidden;}
/*.container{width: 50%;margin: 0px auto;background-color: #919191;position: absolute;}*/
/*.container{width: 50%;margin: 0px auto;background-color: #919191;float: left;}*/
</style>
</head>
<body>
<div class="container">
<div class="sub-container">
sub-container
</div>
<div class="sub-container">
sub-container
sdkfj<br><br>
</div>
</div>
</body>
</html>
說明：有三種方式解決子div設定margin-top時影響父div的margin-top
1、使用overflow:hidden 此時不要指定父div的height， 不然會將子div超出父div的內容隱藏。這個用法非常好！
.container{width: 50%;margin: 0px auto;background-color: #919191;overflow:hidden;}
2、使用float
.container{width: 50%;margin: 0px auto;background-color: #919191;float: left;}
3、使用position:absolute
.container{width: 50%;margin: 0px auto;background-color: #919191;position: absolute;}