html - 尽管分配了百分比宽度，IMG 仍生成滚动条

Question

在How is padding calculated when using percentage (%)?有人说，padding根据 parent 的宽度计算。

我现在有以下分配的 CSS 代码

.img_tutorial_full_width
{
    background-color : #3E3E42;

    margin           : 0;
    border           : 0;
    padding          : 1%;

    width            : 99%;
}

当应用于 <img> 时，我希望如此- 像这样的标签:

<img class="img_tutorial_full_width" src="../img/example.jpg"></img>

在整个宽度上拉伸(stretch)容器，因为

margin=border := 0 + padding := 1% + content := 99% = 100%

但是，浏览器会显示滚动条，滚动条会随着窗口的宽度而增加。概念错误在哪里？

Answer 1

默认情况下图像是内联元素。内联元素忽略高度和宽度属性。只需将 display: block; 或 display: inline-block 添加到 .img_tutorial_full_width 类，它应该可以正常工作。

另请注意，padding-top、padding-bottom、margin-top 和 margin-bottom 可以应用，但这些对内联元素没有影响。详细解释可以read this article