在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; 更改此设置，或调整宽度和高度值。