为什么<img>和<p>元素之间没有空白或边距？

Question

为什么<img>和<p>元素之间没有空白或边距？看来在两个<p>元素之间不存在这样的空间

        *, *: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>

Answer 1

1）

您的问题是line-height。删除（或减小）线条高度，即可按需使用。

2）

图像默认显示为inline。修复此问题，将图像显示为block级元素。

        *, *: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>

Answer 2

添加显示：阻止图片