Why is there space which is neither margin or padding between and
elements?

Question

Why is there space which is neither margin or padding between <img> and <p> elements? It seems that such space does not exists between the two <p> elements

        *, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
    }
    html {
        font-size: 16px;
    }
    body {
        background-color: #f2f2f2;
        font-family: "Helvetica", sans-serif;
        height: 100%;
        width: 100%;
        line-height: 1.8rem;
        color: #333333;
    }
    .summoner-icon {
        max-width: 50px;
        border-radius: 50%;
    }
    .match {
        margin-bottom: 10px;
        padding: 10px;
    }

        <div class='matches'>
            <div>
                <div class='match'>
                    <img class='summoner-icon' src="https://images.pexels.com/photos/433155/pexels-photo-433155.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=150" alt="">
                    <p>Test1</p>
                    <p>Test2</p>
                </div>
            </div>
        </div>

Because they have `line-height` properties. Also, the image in your example is a transparent png and has space in the image. — disinfor, Jul 09 '19 at 19:03
I'm not talking about the transparent part. I am inspecting the elements using the inspect tool so I can see their margins and paddings. That space is neither one of those. — Onyx, Jul 09 '19 at 19:06
It is both `line-height` _and_ adding `display: block` to the image. Otherwise a few px remain. — TheWandererLee, Jul 09 '19 at 19:07

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

1)

Your issue is line-height. Remove (or reduce) your line height and it works as you wish.

2)

Image is default displayed inline. Fix this to display the image as a block level element.

        *, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
    }
    html {
        font-size: 16px;
    }
    body {
        background-color: #f2f2f2;
        font-family: "Helvetica", sans-serif;
        height: 100%;
        width: 100%;
        /*line-height: 1.8rem;*/
        color: #333333;
    }
    .summoner-icon {
        max-width: 50px;
        border-radius: 50%;
        display: block;
    }
    .match {
        margin-bottom: 10px;
        padding: 10px;
    }

        <div class='matches'>
            <div>
                <div class='match'>
                    <img class='summoner-icon' src="https://images.pexels.com/photos/433155/pexels-photo-433155.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=150" alt="">
                    <p>Test1</p>
                    <p>Test2</p>
                </div>
            </div>
        </div>

There will be still a little space between the image and the paragraph, adding a display:block to the image removes it — Ion, Jul 09 '19 at 19:07
Yes, adding display: block to the image removed the whitespace I was talking about. — Onyx, Jul 09 '19 at 19:17

score 2 · Answer 2 · answered Jul 09 '19 at 19:04

2

Add a display:block to your image

answered Jul 09 '19 at 19:04

Ion

1,262
12
19

Why is there space which is neither margin or padding between and elements?

2 Answers2

1)

2)

Why is there space which is neither margin or padding between and
elements?