一般的に、我々はときパディングボックスの全体のサイズが変更されます設定が、我々はただ唯一のボックス内のコンテンツの場所を変更し、ボックスの元のサイズを変更したくない、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>
結果
この属性値を追加した後でなければなりません：ボーダー・ボックスやエフェクト・デフォルト・コンテンツ・ボックスを取ることはありません
