Inline-block是CSS中比較常用的一個display屬性值,它可以讓一個元素的布局既具有block元素的寬度、高度、對齊、邊距等屬性,又具有inline元素的文本流特性,可以在同一行內并排展示。
在CSS中,我們可以使用display: inline-block;來將元素設置為inline-block類型。此時,該元素的特性如下:
.inline-block-elem { display: inline-block; }
1. 元素的寬度和高度會生效
設置display:inline-block,元素會按照設置的寬度和高度進行展示,而不是按照默認的收縮寬度的方式展示(比如<a>標簽)。當然,也可以單獨設置其中的一個屬性,另一個沿用默認值:
.inline-block-elem { display: inline-block; width: 200px; height: 50px; }
2. 行內元素間的空隙
行內元素間存在空隙,這種空隙與inline-block元素相關。因為inline-block元素默認是基于baseline對齊的,空隙的產生是由于baseline以下的那部分內容空間被保留了。我們可以設置inline-block元素的vertical-align屬性值來解決這個問題:
.inline-block-elem { display: inline-block; vertical-align: top; /* 默認為baseline */ }
3. 空格和換行
如果在HTML文檔中,inline-block元素之間存在空格,那么這些空格會按照文本格式來顯示。同時,換行符也被看作普通空格(IE9之前的版本除外)。需要注意的是,只有存在空格(包括換行符)時才會產生這個問題,解決方式是把元素之間的間隔去掉。
4. 父元素字體大小
inline-block元素的字體大小會受到父元素的影響。如果父元素的字體大小發生改變,inline-block元素的大小、間距等屬性也會發生相應的改變。為了避免這個問題,可以設置inline-block元素的字體大小和父元素一致,或者設置特定的字體大小。
總之,使用inline-block屬性可以快速實現網頁布局中元素的div+span橫向排列,是CSS布局中非常好用的一種方式。