为什么图片和导航栏之间有间隙答案

【问题标题】：Why is there a gap between image and navigation bar为什么图片和导航栏之间有间隙
【发布时间】：2014-01-23 02:35:47
【问题描述】：

您好，我在删除图像和导航栏之间的小间隙时遇到了一些问题。老实说，我已经尝试了我能想到的一切。在我的 ul 和 li 级别设置内联块，并使用 text-align: left 似乎不会将超链接移动到 div 的最左侧，从那里我不确定应该做什么.有一个填充，但它不应该造成那么大的差距。

这里是html代码：

        <div id = "header">
        <img src ="img.png"/>   
           <div id ="nav_bar">
            <ul class="nav">
                <li class= "nav"><a href="#">Home</a></li>
                <li class= "nav"><a href="#">Our Products</a></li>
                <li class= "nav"><a href="#">Categories</a></li>
                <li class= "nav"><a href="#">About Us</a></li>
                <li class= "nav"><a href="#">Contact Us</a></li>
            </ul>
           </div>
        </div>

这是一个描述我在说什么的 jfiddle。 http://jsfiddle.net/37VZb/1/

为了澄清我所说的差距是图像的右侧和最左侧的导航栏元素之间。

【问题讨论】：

标签： html css

【解决方案1】：

这是因为 inline(-block) 元素之间的空格字符。这可以通过以这种方式注释该空间来解决：

<img src ="http://www.leapcms.com/images/100pixels1.gif"/><!--
--><div id ="nav_bar"> ...

JSFiddle Demo.

关于 SO 的类似主题：

How to remove the space between inline-block elements?

还有一个很好的参考：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

更新

剩余空间属于<ul>元素上的用户代理应用样式。

Web 浏览器通常在列表元素上应用一些填充。要删除该集合padding: 0;，如下所示：

ul.nav { padding : 0; }

这里是Updated Fiddle。

【讨论】：

嗯，使用inline-blocks 各有利弊。
这似乎有点帮助，但图片和导航栏之间仍然存在 60px~ 的差距。内边距是另外 20 像素，那么其余的从哪里来？
@Hashem Qolami 是的！效果很好。感谢您的帮助！

【解决方案2】：

这是你的意思吗？您可以在 ul 上定位 nav 类并调整分配的默认边距

ul.nav{
  margin: 10px 0;
}

JSFIDDLE

【讨论】：

【解决方案3】：

你的间隙是一个空格，就像你在单词之间找到的一样，因为两个元素都设置为内联框。 在您的 CSS 中，您还为 ul 和 a 设置了一些填充，它们都在那里。 http://jsfiddle.net/37VZb/8/

.nav_bar, .nav{
    padding:0;
    display:inline-block;
}

摆脱它：

1) 不要缩进你的代码，让元素的右括号和左括号相互接触

2) 在中间添加 CSS 注释以吞下该空白

3) 将字体大小设置为 0（IE 为 0.01px）到这些内联框的父级，并将其重置为 img (alt) 和 nav_bar 的 1rem（和或 px/pt）

不使用负边距或负字母间距，它不可靠且不关心这个

【讨论】：