为啥 <img> 和 <p> 元素之间存在既不是边距也不是填充的空间？ [复制]

Posted 2023-03-06

【中文标题】为啥 <img> 和 <p> 元素之间存在既不是边距也不是填充的空间？ [复制]

【英文标题】：Why is there space which is neither margin or padding between <img> and <p> elements? [duplicate]为什么 <img> 和 <p> 元素之间存在既不是边距也不是填充的空间？ [复制]

【发布时间】：2019-11-19 09:29:01

【问题描述】：

为什么<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" >
                    <p>Test1</p>
                    <p>Test2</p>
                </div>
            </div>
        </div>

【问题讨论】：

因为他们有line-height 属性。此外，您示例中的图像是透明 png，并且图像中有空间。

我不是在谈论透明部分。我正在使用检查工具检查元素，以便查看它们的边距和填充。那个空间不是其中之一。

是的，是line-height。

line-height 和在图像中添加display: block。否则剩下几个像素。

【参考方案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" >
                    <p>Test1</p>
                    <p>Test2</p>
                </div>
            </div>
        </div>

【讨论】：

图片和段落之间还会有一点空间，给图片加一个display:block就可以去掉

是的，添加 display: block 到图像中删除了我正在谈论的空白。

【参考方案2】：

在你的图片中添加一个 display:block