HTML和CSS ---保证金问题

如果您在第一个框（red_box）上放置了一个保证金顶部，它将拉动或影响包含框（容器）。为什么？HTML和CSS ---保证金问题

.red_box { 
 
    background-color: red; 
 
    margin-top: 10px; 
 
    margin-right: 20px; 
 
    margin-bottom: 20px;` 
 
    margin-left: 40px; 
 
    height: 100px; 
 
    width: 300px 
 
} 
 

 
.green_box { 
 
    background-color: green; 
 
    margin-top: 40px; 
 
    margin-right: 20px; 
 
    margin-bottom: 20px; 
 
    margin-left: 40px; 
 
    height: 100px; 
 
    width: 300px 
 
} 
 

 
.container { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: yellow; 
 
}

<div class="container"> 
 
    <div class="red_box"> 
 
    red box 
 
    </div> 
 
    <div class="green_box"> 
 
    green box 
 
    </div> 
 
</div>

来源

2017-02-25 chukwuemeka aigbokhan

这样做的原因行为是margin collapsing：

在CSS中，两个或多个框的相邻边缘（这可能会或可能不会是兄弟姐妹）可结合形成单一的保证金。

可以防止它与overflow规则对.container：

.red_box { 
 
    background-color: red; 
 
    margin-top: 10px; 
 
    margin-right: 20px; 
 
    margin-bottom: 20px;` 
 
    margin-left: 40px; 
 
    height: 100px; 
 
    width: 300px; 
 
} 
 

 
.green_box { 
 
    background-color: green; 
 
    margin-top: 40px; 
 
    margin-right: 20px; 
 
    margin-bottom: 20px; 
 
    margin-left: 40px; 
 
    height: 100px; 
 
    width: 300px 
 
} 
 

 
.container { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: yellow; 
 
    overflow: hidden; /* <-- this prevents margin collapsing */ 
 
}

<div class="container"> 
 
    <div class="red_box"> 
 
    red box 
 
    </div> 
 
    <div class="green_box"> 
 
    green box 
 
    </div> 
 
</div>

来源

2017-02-25 14:41:16 andreas

HTML和CSS ---保证金问题

回答

相关问题