时间戳

首页 > 解决方案 > 为什么我的 60px有一个 7.5px 的下边距，而我从未设置它并且在“元素”控制台中没有任何注册？

html - 为什么我的 60px有一个 7.5px 的下边距，而我从未设置它并且在“元素”控制台中没有任何注册？

问题描述

我知道你们更喜欢 stackcode，但是这很多，并且在我尝试时没有正确显示，但是，我将提供基本上下文。

这是整个事情

这是总结的 HTML 和 CSS：

#logoDiv{
}

#jqueryLogo{
    height: 60px;
    padding: 0;
    margin: 0;
}

/*vvv HEADER BELOW vvv*/

#header{
    height: 50px;
    background-color: #05568D;
    border-radius: 10px 10px 0px 0px;
}

#header > ul{
    list-style-type: none;
    padding: 0px 20px 0px 20px;
    margin: 0px;
}

#header > ul > li{
    padding: 0px 10px 0px 10px;
    color: white;
    font-size: 20px;
    line-height: 54px;
    float: left;
}
<div id="logoDiv">
        <img id="jqueryLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/JQuery_logo_text.svg/2000px-JQuery_logo_text.svg.png" alt="" >
   </div>
   
   
   <div id="header" class="container">
       
       <ul>
           <li>Download</li>
           <li>API Documentation</li>
           <li>Blog</li>
           <li>Plugins</li>
           <li>Browser Support</li>
       </ul>
       
   </div>

问题：徽标图像和标题之间有 7.5 像素的边距。我没有设置任何边距来导致这种情况，当我检查元素时，那里什么都没有显示……但是当我用 div 封装徽标 img 时，它现在显示空间等于该 div。

如何摆脱标题和徽标图像之间的空白？

标签： htmlcss

解决方案

正如@Sol 对您的问题所评论的那样，只需向您的图像元素添加一个显示块，如下所示

#jqueryLogo {
    height: 60px;
    display: block;
}

显示：块从父元素的所有侧面删除所有空格，并根据子元素的实际高度和宽度进行调整。

推荐阅读