时间戳

首页 > 解决方案 > 为什么和之间有既不是边距也不是填充的空间

元素？

html - 为什么和之间有既不是边距也不是填充的空间

元素？

问题描述

为什么元素之间有既不是边距也不是填充的空间<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>

标签： htmlcss

解决方案

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>

推荐阅读