内部div超出周围div的CSS边距

看下面的小提琴：

它由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>

---

将overflow=“hidden”添加到portbox以解决此问题。

将overflow=“hidden”添加到portbox以解决此问题。

将

溢出：自动
添加到父级
div
：


阅读正在折叠的页边距：


将
溢出：自动
添加到您的父级
div
：


阅读正在折叠的页边距：


发布您的CSS。我猜你们可能不想在那个里使用边距，它会推到你们的容器上。如果你看第一个屏幕截图，注意蓝色是如何高于内容的-这是因为你在内部分区上有15px的边距。我的建议是不要在那里使用边距。它在小提琴中，但为了方便我会编辑你的CSS。我猜你们可能不想在那个里使用边距，它会推到你们的容器上。如果你看第一张截图，请注意，蓝色比内容更高-这是因为内部div上有15px的边距。我的建议是不要在那里使用边距。它在小提琴中，但为了方便，我会编辑它。你能解释为什么会发生这种情况吗？Mozilla在Parent和first/last child下有一个很好的解释--如果没有边框、填充、内联内容或间隙将块的页边距顶部与其第一个子块的页边距顶部分开，或者没有边框、填充、内联内容、高度、最小高度或最大高度将块的页边距底部与其最后一个子块的页边距底部分开，则这些页边距将折叠。折叠的边距最终位于父级之外。“这是关于控制边距的完整文章：您可以这样考虑……块级元素有一个（0,0）位于填充的顶部和左侧的点，而不是该元素的边距。例如，如果要将背景图像放置在子对象中或完全定位子对象，则它会从填充中查找（0,0）点（如果有）。当溢出为静态（默认）时，它只需取（0,0）它的第一个子元素的点，并将其与自己的（0,0）点相匹配。这有意义吗？顺便说一句，我个人喜欢溢出：隐藏在溢出之上：自动，因为我对滚动条不感兴趣，如果你有一个固定维度的容器，并且内容继续通过容器的底部或右边缘，滚动条就会出现。这有意义。（就css的意义而言：））。对于那些来自经典UI设计的人来说，css是一条非常艰难的道路。没有什么可以直接工作。相比于android或iOS的屏幕设计，它几乎总是按照预期工作，留下更多的时间和精力进行微调。你能解释为什么会发生这种情况吗？Mozilla在Parent和first下有一个很好的解释/最后一个子项--“如果没有边框、填充、内联内容或间隙将块的页边距顶部与其第一个子块的页边距顶部分开，或者没有边框、填充、内联内容、高度、最小高度或最大高度将块的页边距底部与其最后一个子块的页边距底部分开，则这些页边距将折叠。折叠的边距最终位于父级之外。“这是关于控制边距的完整文章：您可以这样考虑……块级元素有一个（0,0）位于填充的顶部和左侧的点，而不是该元素的边距。例如，如果要将背景图像放置在子对象中或完全定位子对象，则它会从填充中查找（0,0）点（如果有）。当溢出为静态（默认）时，它只需取（0,0）它的第一个子元素的点，并将其与自己的（0,0）点相匹配。这有意义吗？顺便说一句，我个人喜欢溢出：隐藏在溢出之上：自动，因为我对滚动条不感兴趣，如果你有一个固定维度的容器，并且内容继续通过容器的底部或右边缘，滚动条就会出现。这有意义。（就css的意义而言：））。对于那些来自经典UI设计的人来说，css是一条非常困难的道路。没有什么能直接工作。相比android或iOS的屏幕设计，它几乎总是按照预期工作，留下更多的时间和精力进行微调。你能解释为什么会发生这种情况吗？你需要阅读不断缩小的页边空白来理解为什么我会这样做t发生。这是页边距的行为。或者，使用填充。或者，您可以解释它发生的原因吗？您需要阅读折叠页边距以了解它发生的原因。这是页边距的行为。或者，使用填充。或者
   .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;
    }

.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
}