防止填充变形div

Question

我有很多文字放在一个小<div>框中，所以我不需要太多空间，而且尺寸非常精确。

这是我的代码：

<div class="myBox">Box</div>

<style>

    .myBox{
        width:100%;
        height:100%;
        padding:6px;
    }

</style>

我不希望我的填充物使我的盒子变形。

我无法改变宽度和高度。

Answer 1

添加以下属性：

box-sizing: border-box;

这会从默认box-sizing更改content-box，其宽度仅基于内容。 border-box的宽度和高度包括内容，padding和边框（但不是margin）尺寸。