En general, hemos creado el tamaño total de la caja va a cambiar cuando el relleno, pero acabamos de cambiar la ubicación del contenido dentro de la caja única, no quieren cambiar el tamaño original de la caja es necesario añadir una propiedad cuadro de dimensionamiento en el css
Esto no cambia el ejemplo de código se añade propiedad box-dimensionamiento
ya que el tamaño de la caja de relleno 220 en un tamaño de 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>
después de añadir
.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>
resultado
Después de agregar este valor de atributo debe ser: caja de frontera o no tener efecto el contenido de la caja por defecto
