【HTML筆記】--- 內聯元素間距問題及解決方案
阿新 • • 發佈：2019-03-07
並且 code normal blank 編輯 aci 空白字符 htm 大小
一、內聯元素間距問題
在HTML實踐中我們會發現，有時候內聯元素之間會存在一定的間距，並且這間距和margin和padding無關。這是由編輯時的空白字符引起的，並且間距的大小受父元素的font-size影響。
這和CSS的white-space屬性有關，該屬性的默認值為normal，normal屬性是將多個空白字符合並成一個“空白”，這個空白和父元素的font-size有關。所以當內聯元素之間存在空白字符時，它們之間就存在一個“空白”間距。
<img>圖像元素也屬於內聯元素，所以處理圖像元素間的“空白”也可使用下列解決方案。
二、解決方案
1.在編輯器中清除空白字符
簡單粗暴的方法
處理前：
--------------------------------------
處理後：
<body> <span style="font-size: 25px; background-color: #CCFF66;">today</span><span style="font-size: 25px; background-color: #CCCCFF;">tomorrow</span> </body>
2.設置父元素font-size: 0;
當父元素的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>
3.設置浮動屬性float
浮動之後會脫離標準流，不受“空白”的影響。
<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>
註意兩個<span>標簽同時設置float屬性，若只設置第二個<span>則會如下圖顯示：
若不懂，請看這：【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>
5.設置word-spacing屬性值為負數
和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>
6.設置屬性display: block;
塊級元素之間不存在這樣的空白，所以可以使用使用display: block; 將內聯元素設置為塊級元素。
處理前：可以看到上下兩張圖片之間存在“空白”
----------------------------------------------------
處理後：
<body style="width: 130px;"> <img src="F:\images\zhaoliying\1_1_1.jpg" width="120px" style="display: block;"> <img src="F:\images\zhaoliying\1_1_1.jpg" width="120px"> </body>
三、最後
若有不足，還望留言指出，十分感謝！
【HTML筆記】--- 內聯元素間距問題及解決方案