内边距padding

html:

调皮的内边距padding,会把DIV撑大
<div class="box1">
<img src="./static/img/bg.jpg" alt="背景" width="200px">
</div>
<br/>
用宽度分离：
<div class="wrap">

 <div class="box2">
 <img src="./static/img/bg.jpg" alt="背景" width="200px">
 </div>
</div>
<br/>
用box-sizing

<div class="box3">
<img src="./static/img/bg.jpg" alt="背景" width="200px">
</div>

css:

.box1{
 width: 500px;
 height: 200px;
 border: 1px solid red;
 background-color: black;
}
.box1{
 padding: 50px;
 width: 200px;
}
/*宽度分离*/
.wrap{
 width: 300px;
 /*height: 300px;*/
 border: 1px solid green;
 background-color: yellow;
}
.box2{
 background-color: white;
 border: 1px solid green;
 padding: 50px;
}

.box3{
 /*推荐使用*/
 box-sizing: border-box; /*这里一定要定位到border-box上,否则又会变大*/
 /*box-sizing: content-box; 这里一定要定位到border-box上*/
 width: 300px;
 background-color: pink;
 border: 1px solid red;
 padding: 50px;

}