CSS之间的1px空间

我制作了一支显示问题的笔。CSS之间的1px空间

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: #fffeed; 
 
} 
 
#menu { 
 
    height: 60px; 
 
    border-bottom: 1px solid black; 
 
} 
 
#menu > div { 
 
    border-right: 1px solid black; 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 90px; 
 
    padding: 20px 0; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
#menu > div > a { 
 
    text-decoration: none; 
 
    color: black; 
 
}

<div id="wrapper"> 
 
    <header> 
 
    <div id="menu"> 
 
     <div><a href="#">bio</a> 
 
     </div> 
 
     <div><a href="#">blog</a> 
 
     </div> 
 
     <div><a href="#">contact</a> 
 
     </div> 
 
    </div> 
 
    </header> 
 
</div>

如果您检查与Chrome开发者工具菜单，有每个格之间的差距1px的。我禁用边框，将边距和填充设置为0，但我不会消失。要么我是愚蠢的修复它，要么我不知道。我试过了line-height：0px;和vertical-align：top;但那些为我工作的人我将不胜感激帮助，

乔尔

来源

2016-04-15 huhnmonster

其空白区域http://stackoverflow.com/questions/5078239/how-to-remove行间块元素之间的空间 –

删除你在你的标记有空格，你会好

<div id="wrapper"> 
    <header> 
    <div id="menu"> 
     <div><a href="#">bio</a> 
     </div><div><a href="#">blog</a> 
     </div><div><a href="#">contact</a> 
     </div> 
    </div> 
    </header> 
</div>

请注意，<div>从</div>

在原来的标记，你换行，并在这些点上</div>和<div>原因文本节点之间的空隙 - http://software.hixie.ch/utilities/js/live-dom-viewer/给你这是怎么回事的一个不错的主意。下面是部分有问题

删除空格快照摆脱这些文本节点。

这些文本节点导致匿名行内框（按照可视化格式模型 - 见https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#anonymous）。这些匿名内联框继承了包含块的属性（即#menu），这就是为什么将#menu上的font-size设置为0（链接副本的answer中建议的选项之一）也会在理论上（并且实际上对于大多数浏览器）摆脱了差距（增加额外的CSS来纠正子div的字体大小）

来源

2016-04-15 14:40:27 potatopeelings

为什么不把这个问题作为一个愚蠢的东西来解决？ –

现在你有足够的代表来认识到这类问题经常被问到。确保您在进行尽职调查和搜索之前确保问题在重复之前不会重复。 – cimmanon

对不起，重复，不打算这样做。但你能向我解释为什么中间的空间算作空白吗？ – huhnmonster

尝试边框宽度设置为0

* { 
    margin: 0px; 
    padding: 0px; 
    border-width: 0px; 
}

来源

2016-04-15 14:38:32 chriswirz

CSS之间的1px空间

回答

相关问题