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/