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

2022-04-12 15:49:12 字數 3087 閱讀 4922

在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

>

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

>

注意兩個標籤同時設定float屬性,若只設定第二個則會如下圖顯示:

若不懂,請看這:【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; 將內聯元素設定為塊級元素。

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

處理後:

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 元素是塊級元素,它可用於組合...