는 CSS에서 상자 크기 조정 속성을 추가 할 필요가있다 상자의 원래 크기를 변경하지 않으려는, 일반적으로, 우리는 때 패딩 변경됩니다 상자의 전체 크기를 설정하지만, 우리는 단지 단지 상자 안에 내용의 위치를 변경
코드 샘플을 변경하지 않고이 상자 크기 속성이 추가된다
(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>
결과
이 속성 값을 추가 한 후에해야합니다 : 국경 상자 또는 효과의 기본 내용 상자를하지 않습니다
