内部 div 的 CSS 边距延伸到周围的 div

Question

请看下面的小提琴： https://jsfiddle.net/b6bpzsg7/

它包含 3 个投资组合项目，它们是带有类舷窗的 div，只有左右填充以偏移到邻居。

<div class="col-md-4 porthole">
    <div class="portbox text-center">
         <div class="portplace">
            <div>Coming soon</div>
          </div>
          <header>Second</header>
     </div>
</div>

内部 div 有一个 portbox 类，我可以在 chrome developer 中看到它不会垂直扩展以占据它周围的所有舷窗。 portbox 没有填充、边框或边距

在 portbox 中有一个占位符 div，其类 portplace 周围有 15 像素的边距，顶部和底部的填充为 30 像素。在 chrome 开发人员中，我看到上边距从封闭的端口箱延伸到外部舷窗的上边距。

谁能启发我？

编辑

   .portrow {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 10px;
        background-color: #888;
    }

    .porthole {
        padding: 0px 15px 0px 15px;
        overflow: auto;
    }   

    .portbox {
        border-width: 1px;
        border-color: #000;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 
    }

    .portplace {
        margin: 15px 15px 15px 15px;
        padding: 30px 0px 30px 0px;
        background-color: lightgray;
        color: darkslategrey;
    }

Answer 1

将overflow: auto 添加到您的父级div：

https://jsfiddle.net/pavy/b6bpzsg7/2/

.portbox {
    border-width: 1px;
    border-color: #000;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    overflow: auto; // you need this
}

阅读折叠边距：

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Answer 2

添加overflow="hidden"到portbox来解决这个问题。