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空間

回答

相關問題