IMG generates scrollbars despite percentual width assignments

Question

In How is padding calculated when using percentage (%)? was stated, that padding is calculated according to parent's width.

I now have the following assignment CSS-Code

.img_tutorial_full_width
{
    background-color : #3E3E42;

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

    width            : 99%;
}

which I would expect, when applied to an <img>-Tag like this:

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

to stretch the container over the whole width, since

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

However, the browser shows scrollbars, that are increasing, the wider the window is. Where is the conceptual mistake?

img is a self-closing tag, for starters. You would use either `` or ``. — Tieson T., Jun 04 '18 at 03:10
@TiesonT. Thank you for the comment. Unfortunately, changing the code did not change the appearance — Benj, Jun 04 '18 at 03:12

Mishel Tanvir Habib · Answer 1 · 2018-06-04T04:17:42.573

0

By default images are inline element. Inline elements ignores height and width properties. Just add display: block; or display: inline-block to the .img_tutorial_full_width class and it should work just fine.

Also please note, the padding-top, padding-bottom, margin-top and margin-bottom can be applied, but these have no effects on the inline elements. For detail explanation, you can read this article

edited Jun 04 '18 at 04:17

answered Jun 04 '18 at 04:01

Mishel Tanvir Habib

1,112
11
16

Thank you for your effort. That is all true, but not the solution to the problem – Benj Jun 04 '18 at 05:17

score 0 · Accepted Answer · answered Jun 04 '18 at 05:19

There is 100% Total Width. padding: 1%; takes 1% on the left and 1% on the right, so 2% in total

.img_tutorial_full_width
{
    background-color : #3E3E42;

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

    width            : 98%;
}

works, because 98% + 2 * 1% = 100%

IMG generates scrollbars despite percentual width assignments

2 Answers2