父容器背景为什么会多右边的部分呢?

MrWang
  • 3.7k
<div id="box" class="box clear-block">
    <img src="https://demo.cssworld.cn/images/common/l/1.jpg">
</div>
.box {
   padding: 10px;
   background-color: #cd0000;
   border: 10px solid green;
}
img{
   width: 50px;
}

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

回复
阅读 538
3 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏