javascript - div 内的文本填充

Question

我想在 div 内的文本周围添加填充这样 div 边框和文本之间就有一些地方。

我发现了一个有趣的post关于这一点。

但不知何故，所有给定的示例都扩展了我的 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%;
}

Example