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;
}
