HTML筆記 內聯元素間距問題及解決方案

在html實踐中我們會發現，有時候內聯元素之間會存在一定的間距，並且這間距和margin和padding無關。這是由編輯時的空白字元引起的，並且間距的大小受父元素的font-size影響。

這和css的white-space屬性有關，該屬性的預設值為normal，normal屬性是將多個空白字元合併成乙個「空白」，這個空白和父元素的font-size有關。所以當內聯元素之間存在空白字元時，它們之間就存在乙個「空白」間距。

影象元素也屬於內聯元素，所以處理影象元素間的「空白」也可使用下列解決方案。

1.在編輯器中清除空白字元

簡單粗暴的方法

處理前：

--------------------------------------
處理後：
<
body
>
<
span 
style
="font-size: 25px; background-color: #ccff66;"
>today
span
><
span 
style
="font-size: 25px; background-color: #ccccff;"
>tomorrow
span
>
body
>

當父元素的font-size為0時，該「空白」也為0。應當注意的是內聯元素會繼承父元素的font-size，所以要單獨給內聯元素設定font-size，否則font-size為0單詞將不會顯示。

<

body 
style
="font-size: 0px;"
>
<
span 
style
="font-size: 25px; background-color: #ccff66;"
>today
span
>
<
span 
style
="font-size: 25px; background-color: #ccccff;"
>tomorrow
span
>
body
>

浮動之後會脫離標準流，不受「空白」的影響。

<

body
>
<
span 
style
="font-size: 25px; background-color: #ccff66; float: left;"
>today
span
>
<
span 
style
="font-size: 25px; background-color: #ccccff; float: left;"
>tomorrow
span
>
body
>

若不懂，請看這：【css學習】--- float浮動屬性

4.設定margin屬性值為負數

負數的值要根據父元素的font-size大小確定

<

body
>
<
span 
style
="font-size: 25px; background-color: #ccff66;"
>today
span
>
<
span 
style
="font-size: 25px; background-color: #ccccff; margin-left: -5px;"
>tomorrow
span
>
body
>

和margin一樣，負值要根據父元素的font-size大小確定

<

body 
style
="word-spacing: -5px;"
>
<
span 
style
="font-size: 25px; background-color: #ccff66;"
>today
span
>
<
span 
style
="font-size: 25px; background-color: #ccccff;"
>tomorrow
span
>
body
>

塊級元素之間不存在這樣的空白，所以可以使用使用display: block; 將內聯元素設定為塊級元素。

處理前：可以看到上下兩張之間存在「空白」

處理後：

HTML元素間距問題
在利用css 布局時，經常會遇到一些沒有定義間距 padding margin 之類的內容，但是頁面上卻總會有一些不知從何而來的間距出現，下面就是我在自己的工作中遇到的一些常見情況的總結，及其消除方法。1.併排div 之間的間距。多個 div元素在定義屬性 display inline block ...
html 塊元素 內聯元素 內聯塊元素 練習
html標籤 也叫元素 大概可以統分為三大類，塊元素 內聯元素 內聯塊元素。塊元素 1，常用的塊元素 ul li div p dl dt dd h1 h6。2，塊元素支援所有的樣式。3，盒子獨佔據一行，即使設定了寬度。4，如果沒有設定寬度，預設寬度為父元素的100 內聯元素 1，常用的內聯元素 sp...
HTML 區塊 內聯元素
html 區塊 內聯元素 2 和 html 可以通過 和 將元素組合起來。3 區塊元素 大多數 html 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時，通常會以新行來開始 和結束 例項 4 內聯元素 內聯元素在顯示時通常不會以新行開始。例項 5 元素 html 元素是塊級元素，它可用於組合...