html - 为什么我的 60px <img> 有一个 7.5px 的底部边距,而我从未设置它并且在 'Elements' 控制台中没有任何注册?

标签 html css

<分区>

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

Here is the entire thing

这里是 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>

问题: Logo 图片和页眉之间有 7.5 像素的边距。我没有设置任何边距来引起这种情况,当我检查元素时,那里什么也没有显示...但是当我用 div 封装 Logo img 时,它现在显示的空间等于那个 div。

如何去掉页眉和 Logo 图片之间的空白?

最佳答案

按照@Sol 对您的问题的评论,仅向您的图像元素添加一个显示 block

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

Display: block 移除父元素四周的所有空格,并根据子元素的实际高度和宽度进行调整。

关于html - 为什么我的 60px <img> 有一个 7.5px 的底部边距,而我从未设置它并且在 'Elements' 控制台中没有任何注册?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50521586/

上一篇:html - CSS - 如何将容器宽度调整为段落长度,防止它换行?

下一篇:css - Bootstrap 4 输入不会在填充处停止

相关文章:

javascript - 如何修复 'Sticky Navbar using Materialize css'

CSS:什么可以在 img 和文本之间放置空间,除了边距和填充?

html - 使文本适合 div 的最大宽度

Jquery 下拉列表隐藏在包装 div 后面

html - 小下拉,大数据

html - 下拉导航菜单底部有 1 个无法解释的透明像素

html - CSS 过渡/悬停效果在 Safari 中不起作用

javascript - 根据值删除项目(其中一个项目可以有多个值)

html - 响应式 3 列网格布局留有开放空间

css - 查找 Wordpress/#7 CSS 文件