摆脱div之间的空间 - CSS

时间:2013-03-19 00:44:26

标签: css html whitespace

我有以下HTML代码,其中subnav div是div标记的集合,将作为featuredexhibit div中的标签。问题是在featureexhibit div的顶部和subnav标签的底部之间添加了空格。

HTML:

<div id="subnav">
    <div id="subnavtab"><a href="">Plan Your Visit</a></div>
    <div id="subnavtab"><a href="">Tour the Museum</a></div>
    <div id="subnavtab"><a href="">Program & Events</a></div>
    <div id="subnavtab"><a href="">Membership</a></div>
    <div id="subnavtab"><a href="">Donate</a></div>
</div>
<div id="featuredexhibit">
    Featured Exhibit - this can be a rotating menu of exhibits
</div>

CSS:

#subnav { margin-top: 20px; width: 740px; display: inline-block; }
#featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
#subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }

我尝试使用Chrome开发者工具查找问题,但我没有运气,或者我不知道该寻找什么。

4 个答案:

答案 0 :(得分:5)

您的代码似乎没有任何问题。

您确定没有其他CSS存在冲突吗?确保您使用的CSS标记来自HTML中添加的最后一个CSS。

例如,

<link rel="stylesheet" type="text/css" href="css-1.css">
<link rel="stylesheet" type="text/css" href="css-2.css">

如果“css-2.css”中有常见标签,那么它将覆盖“css-1.css”的任何类似标签

答案 1 :(得分:2)

你应该给subnav一个浮动,然后清除featuredexhibit,然后只有它不能在它们之间保存一个空格。

#subnav{float: left;}
#featuredexhibit{clear: both;}

请参阅 Demo

答案 2 :(得分:0)

老实说,我不确定白色空间为什么会存在,但是我通过移除inline-block并在两者中创建了一个清晰的内容来修复它。

CSS

.subnav { margin-top: 20px; width: 740px; }
.featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
.subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; }
.clear { clear: both; }

HTML

<div class="subnav">
    <div class="subnavtab"><a href="">Plan Your Visit</a></div>
    <div class="subnavtab"><a href="">Tour the Museum</a></div>
    <div class="subnavtab"><a href="">Program & Events</a></div>
    <div class="subnavtab"><a href="">Membership</a></div>
    <div class="subnavtab"><a href="">Donate</a></div>
    <div class="clear"></div>
</div>
<div class="featuredexhibit">
    Featured Exhibit - this can be a rotating menu of exhibits
</div>

jsFiddle:http://jsfiddle.net/vFFx5/

答案 3 :(得分:0)

我知道这已经过时了,但是由于我刚遇到这个问题,我不妨指出以后的访问者:https://css-tricks.com/fighting-the-space-between-inline-block-elements/

问题似乎是新行在一行内联块元素中计为空格字符。要解决此问题,请使用浮动块或弹性框。