我想在 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>
最佳答案
您可能正在寻找 box-sizing:border-box
,它使元素在宽度中包含填充,因此不会扩展额外添加的填充。
代码:
.cell {
box-sizing:border-box;
width:30%;
height:100%;
background:orange;
padding: 10%;
}
关于javascript - div 内的文本填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34306807/