Bootstrap中的填充底部CSS错误？

Question

首先我想说我对网页设计有点陌生，如果我只是打开了一个无用的线程，请原谅我。

也就是说，

我想我可能在 Bootstrap 中发现了一个奇怪的错误：在尝试为我正在构建的网站创建一个非常简单的标题时，我注意到在 CSS 中添加 padding: 10px; 会以不同的方式返回到左侧和顶部填充，但底部没有填充，因此导致文本完全偏离底部。

IMO 的行为是，Bootstrap 从 div 的顶部开始计算底部填充，而不是从底部开始。

所以要给 100px 高的 div 提供 10px 的内边距，应该给 padding-bottom: 110px;，老实说这感觉有点奇怪。

这是我使用 Bootply 和 JSFiddle 制作的一个小演示/验证示例。两者都尝试在 div 上使用 height: 100px; padding-bottom: 70px;，但在 Bootstrap 上不起作用

使用引导程序：http://www.bootply.com/mUYldKGmKE

JSFiddle：https://jsfiddle.net/7fqj65yy/

如何在 Bootstrap 上修复它：height: 100px; padding-bottom: 170px; （我不能发布超过 2 个链接）

在 Chrome 和 Firefox 上都试过了。

告诉我你的想法，如果这是真的还是假的，如果我只是输入了一些愚蠢的东西，请关闭线程并将其从你的记忆中删除。

谢谢

Answer 1

Bootstrap css 包含以下代码：

* {
  box-sizing: border-box;
}

这包括元素总宽度和高度中的填充（和其他框属性）。

在这里演示：https://jsfiddle.net/ujosu13t/1/

在此处了解更多信息：https://css-tricks.com/box-sizing/

Answer 2

我认为使用这个 sn-p 是正确的，因为我已经尝试过这个代码 padding-bottom: 170px; 而不是 padding-bottom: 70px;

Bootstrap 不会为 padding-bottom 添加像素，但会替换它

这是我的例子

.black {
    width: 150px;
    height: 100px;
    background-color: #000;
    padding-bottom: 170px; /* instead of padding-bottom: 70px;*/
    color: #ab5469;
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="black">
  Something to say
</div>