如何防止CSS中的边距溢出?

只需将容器设置为一个flex容器,您就可以获得解决问题的收缩效果。然后调整中间一个的边距,使其保持与边距折叠时相同的间距 (flexbox禁用页边距折叠) .

#a { height: 33%}
#b { height: 17%}
#c { height: 50%}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container border border-warning d-flex flex-column" style="height: 400px">
  <div id="a" class="row bg-primary m-2">A</div>
  <div id="b" class="row bg-secondary mx-2">B</div><!-- margin only on the left and right -->
  <div id="c" class="row bg-info m-2">C</div>
</div>

你可以用 display:flex display: flex; flex-direction: column; 到父样式。

或者你可以用 calc margin 从 height -

#a { height: calc(33% - 0.5rem) }
#b { height: calc(17% - 0.5rem) }
#c { height: calc(50% - 0.5rem) }

所以你必须改变容器的高度 auto 如果400像素不重要的话。(可能是432像素。)

你必须移除m-2并更改 margin 到 padding: .5rem 加上 box-sizing: border-box 对于A,B,C,如果div和高度比之间的填充很重要。

或者

overflow: hidden 对于容器,所以最后的div溢出将不可见,但是在这种情况下 #c { height: 50%} 不会是真的。

  .container {
        overflow: hidden;
    }

检查文档: CSS overflow property

由于每个子div下面的边距空间,div框不适合父div框。div下面的边距空间是8px。页边距占用的总空间为32px,占总空间的8%。因此,您必须将每个子div的百分比高度减少8/3px,即每个div约2px,任何两个div约1px。