一般我们设置了内边距时整体的盒子的大小会有所改变,但我们只要改变盒子里面的内容位置而已,不想改变盒子原来的大小这是就要在css里添加box-sizing属性
这是没有改变添加box-sizing属性的代码示例
由于设置了内边距盒子大小变成了220*220的大小了
.box1{
width: 200px;
height: 200px;
background-color: blue;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
padding: 10px;
}
<body>
<div class="box1">hello world</div>
</body>
添加之后
.box1{
width: 200px;
height: 200px;
background-color: blue;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
padding: 10px;
/*
想改变元素距离内容的间距 ,但又不想改变盒子的大小
添加 box-sizing 属性
*/
box-sizing: border-box;
}
<body>
<div class="box1">hello world</div>
</body>
结果
添加这个属性之后其值必须为 : border-box 否则不生效 默认是 content-box