行忽略父容器填充

Question

我对css比较陌生，有一个问题应该是基本的，但我好像没看懂。

问题是引导容器流体的行 div 忽略了容器流体 div 上设置的填充。

内边框是行，外边框是带有边距和内边距的容器流体。该行似乎忽略了我设置的填充。我的代码中没有设置此行为。

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-sm"></div>
  </div>
</div>

CSS

.container-fluid {
  margin: 1%;
  padding: 3%;
  border: solid 1px black;
}

.row {
  height: 50px;
  border: solid 1px black;
}

有什么建议吗？我可能对 css 没有完全理解，但我认为这不应该发生。

Answer 1

代码似乎完全按照它应该做的。似乎您对边距和填充的信息有混淆。也许引入一些颜色可以让事情变得更清楚：

.container-fluid {
  margin: 1%;
  padding: 3%;
  border: solid 1px black;
  background-color: orange;
}

.row {
  height: 50px;
  border: solid 1px black;
  padding: 3px;
  background-color: blue;
}

.col-sm {
  background-color: red;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm"></div>
  </div>
</div>

如您所见，容器的填充（橙色）适用，因为 row 和 col（蓝色和红色）都不在容器的内边框旁边。所有的橙色空间都是填充，如果我们将填充设置为 0，就没有橙色空间。

编辑：橙色框左侧和右侧缺少填充是由于引导程序自己的样式规则覆盖了我们的规则。