在div內填充文本

Question

我想在div內放置的文本周圍添加填充，以便在div邊框和文本之間有一定的位置。

我發現了一個有趣的帖子 。

但是所有給出的示例都以某種方式擴展了我的div，因此它不再適合整個布局。

我已經為div使用了該CSS代碼：

.cell {
   width:30%;
   height:100%;
   background-color:orange;
   outline:10px solid black;
}

該代碼給了我以下結果：

橙色區域是要在其中放置文本的div。所有解決方案均使用邊框擴展div，以使布局得以擴展，這就是我要避免的方法。

所以我試圖添加填充（應該在div內）：

.cell {
    width:30%;
    height:100%;
    background:orange;
    padding: 10%;
}

給我結果：

也許問題在於我正在使用jQuery BigText使文本適合div：

jQuery的：

 $(function() {
            $(window).on('resize', function() {
                  $(".area_competences_text").bigText();
            });
                $(window).trigger('resize');    
            });

HTML：

<div class ="cell">

                      <div class="area_competences_text text_software"> 
                          <div class="referencesProductHeader">            
                            HEADER TEXT
                          </div>
                                <ul class="listStyle">
                                 <li>Some Text</li>  
                                 <li>Some Text</li>  
                                 <li>Some Text</li>  
                                 <li>Some Text</li>  
                                 <li>Some Text</li>  
                                </ul>  

                       </div>
</div>

Answer 1

您可能正在尋找box-sizing:border-box ，它使元素的寬度包括填充，因此在添加額外的填充時它會擴展。

碼：

.cell {
    box-sizing:border-box;
    width:30%;
    height:100%;
    background:orange;
    padding: 10%;
}

例

Answer 2

這是預期的行為。 您可能想了解CSS盒模型 。

基本上，寬度和高度不是div的總寬度和高度。 在計算div的大小時，需要考慮填充，邊框和邊距。

您可以使用box-sizing：border-box; 更改此設置，或調整寬度和高度值。