在html實踐中我們會發現,有時候內聯元素之間會存在一定的間距,並且這間距和margin和padding無關。這是由編輯時的空白字元引起的,並且間距的大小受父元素的font-size影響。
這和css的white-space屬性有關,該屬性的預設值為normal,normal屬性是將多個空白字元合併成乙個「空白」,這個空白和父元素的font-size有關。所以當內聯元素之間存在空白字元時,它們之間就存在乙個「空白」間距。
影象元素也屬於內聯元素,所以處理影象元素間的「空白」也可使用下列解決方案。
1.在編輯器中清除空白字元
簡單粗暴的方法
處理前:2.設定父元素font-size: 0;--------------------------------------
處理後:
<
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單詞將不會顯示。
<3.設定浮動屬性floatbody
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
>
浮動之後會脫離標準流,不受「空白」的影響。
<注意兩個標籤同時設定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
>
若不懂,請看這:【css學習】--- float浮動屬性
4.設定margin屬性值為負數
負數的值要根據父元素的font-size大小確定
<5.設定word-spacing屬性值為負數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大小確定
<6.設定屬性display: block;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 元素是塊級元素,它可用於組合...