在利用css
布局時，經常會遇到一些沒有定義間距
padding
、margin
之類的內容，但是頁面上卻總會有一些不知從何而來的間距出現，下面就是我在自己的工作中遇到的一些常見情況的總結，及其消除方法。 1.
併排div
之間的間距。 多個
div元素在定義屬性：
display:inline-block;
後，多個
div元素之間併排排列，但是它們之間總是隔著那麼幾畫素的距離，即便你一次又一次修改自己的
padding
、margin
設定為0
，都沒辦法取消。
它們之間存在的間距，是因為不同
div之間存在預設間距，因為寫**的習慣，乙個
div元素結束之後，我們總會換行開始寫**，這一換行就是
div之間存在間距的原因。
所以解決辦法很簡單，
a.去掉**上不同
div元素之間的換行或者空格即可，這個方法在**可讀性上有些不可取。如果你對**格式有很嚴格的限制，像我一樣是個無可救藥的強迫症，你就選擇下面的方法吧。
b.利用注釋將
div之間的空格標記起來。c.網上還有人提到過一種解決方案，
將margin
設定為負值，這個方法也是可行的，但是由於瀏覽器之間的標準差異，
margin
的設定可能會需要在不同瀏覽器中設定為不同的值，增加了工作的複雜度。
this is div 1.
this is div 1.
this is div 1.
在乙個簡單的頁面中，定義乙個
div元素，想要讓它的背景為黑色，
width:100%
，但是，發現元素與頁面之間總存在一點間隔。如圖所示：
看著特別均勻的感覺，利用
chrome
開發者工具檢視其樣式，可以發現
這是瀏覽器預設的樣式，所以，這個的解決方法很簡單，重新寫乙個新的樣式，
margin:0px;
覆蓋現有的樣式即可。最終效果：
3.p元素與相鄰元素前後都有
1em的間距。
我遇到這個問題是在
2.中定義乙個頁面的
header
的時候遇到的。
2.的問題解決後，左右與瀏覽器邊框之間的間距沒有了，但是上下之間還存在更大的間距。如下圖所示：
最開始以為還是
div的原因，所以糾結了許久，後來，同樣利用神奇的
chrome
開發者工具，乙個元素乙個元素地看，發現了
tap here.choose your own style!
的樣式如下：
因為前後都有
1em的間距，發現問題了，解決辦法就隨之出來了，同樣新寫樣式，覆蓋已有的即可。
p許多的塊級元素都存在一些自有的間距定義，
padding
或者margin
，遇到這些不知從何而來的間距時記得先看看它們的自帶屬性。
html塊元素和間距
html裡的元素分為兩大類 塊元素 div塊元素獨佔一行的.有寬高的 浮動 可以使塊元素在一行上顯示 內聯元素 不獨佔一行，沒有寬高 span 寫文字的，其實div足夠勝任工具人的角色。改變元素位置的方法 margin 外邊距 子父級margin top會合併為1個 同級相鄰的top和bottom會...
HTML 元素間預設存在間距的問題
我們先來看一段 myspan1 myspan2 class myspan1 我是span1span class myspan2 我是span2span div 執行效果如下圖所示 可以看到，在清除了預設的 margin 和 padding 後，兩個 span 元素之間依然產生了間距。這個間距是在源 ...
HTML筆記 內聯元素間距問題及解決方案
在html實踐中我們會發現，有時候內聯元素之間會存在一定的間距，並且這間距和margin和padding無關。這是由編輯時的空白字元引起的，並且間距的大小受父元素的font size影響。這和css的white space屬性有關，該屬性的預設值為normal，normal屬性是將多個空白字元合併成...