Bootstrap中填充底部的css错误？

Question

首先，我想说我对网页设计有些不熟悉，所以如果我打开了一个无用的线程，请原谅我。

这就是说，

我觉得我还挺可能已经发现可能在引导一个奇怪的错误：试图创建一个网站我建立一个非常简单的头，我注意到，加入padding: 10px;的CSS会与左边和顶部填充区不同，但在底部填充区没有填充区，因此导致文本完全偏离底部。

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

所以要给10px填充到100px高的div，应该给padding-bottom: 110px;，这真的很奇怪。

以下是我使用Bootply和JSFiddle所做的一点演示/验证示例。这两种尝试有height: 100px; padding-bottom: 70px;在DIV上，与引导的引导

不起作用：http://www.bootply.com/mUYldKGmKE

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

如何解决它的引导：height: 100px; padding-bottom: 170px; （我不能发布更多比2链接）

同时尝试Chrome和Firefox。

告诉我你的想法，如果这是真的，如果我只是输入了一些愚蠢的东西，请关闭线程并从内存中删除它。

感谢

Answer 1

我认为这是正确的，因为我有尝试这个代码，而不是 padding-bottom: 170px;使用这个片段padding-bottom: 70px;

引导不加像素填充，底部，但它取代它

这里是我的榜样

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

个

Answer 2

引导CSS包括以下代码：

* { 
    box-sizing: border-box; 
} 

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

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

这里了解更多：https://css-tricks.com/box-sizing/