Question

我想在div中放置文本周围添加填充所以在divs边框和文本之间有一些位置。

我发现了一个有趣的post。

但不知怎的，所有给定的例子都扩展了我的div，因此它不再适合整个布局。

我已将该css代码用于div：

.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%;
}

Example

Answer 2

这是预期的行为。您可能想了解CSS box model。

基本上，宽度和高度不是div的总宽度和高度。在计算div的大小时，需要考虑填充，边框和边距。

你可以使用box-sizing：border-box;更改此项，或调整宽度和高度值。

在div里面填充文本

2 个答案: