Generally, we set up the overall size of the box will change when the padding, but we just change the location of the content inside the box only, do not want to change the original size of the box it is necessary to add box-sizing property in the css
This does not change the code sample is added box-sizing property
since the size of the padding box 220 into a size of 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>
After adding
.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>
result
After adding this attribute value must be: border-box or do not take effect default content-box
