<div id="box" class="box clear-block">
    <img src="/uploads/allimg/210726/15295Q292-0.jpg">
</div>

.box {
   padding: 10px;
   background-color: #cd0000;
   border: 10px solid green;
}
img{
   width: 50px;
}

这里图片加了 width: 50px;为什么会多黄圈圈内的部分呢
设置 width: 100%;这个就是正常的自适应

因为父元素是一个div，他是一个block(块元素)，块元素的特点就是默认宽度为平铺父元素，高度根据子元素撑起来。img只设置宽度或者高度，那么他会自动计算高度或者宽度。这两个清楚了，上面的也就明白了

整个div是的背景颜色是红色的，然后你又给div加了一个10px绿色的边框，而img图片在div内只占了50px宽度，所以是正常的啊。

div是Block(块级), 块级默认平铺一整行,如果把父级改成display:inline-block的话,大小是由内容撑开的,就不会有右边的红色了.
不论是block和inline-block 的高度都是由内容撑开(如果不设置固定值的话)