Question

在How is padding calculated when using percentage (%)?中声明，padding是根据父母的宽度计算的。

我现在有以下任务CSS-Code

.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>

从整个宽度拉伸容器，因为

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

Answer 2

总宽度为100％。 padding: 1%;左侧占1％，右侧占1％，总占2％

.img_tutorial_full_width
{
    background-color : #3E3E42;

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

    width            : 98%;
}

有效，因为98% + 2 * 1% = 100%

IMG生成滚动条，尽管宽度分配百分比

2 个答案: