作者:
WangMin
格言:努力做好自己喜歡的每一件事
CSDN原創文章
部落格地址 ? WangMin
我們在開發的過程中，難免會出現一些難以預料的問題。那麼其中，CSS空白現象就是非常常見的問題之一。雖然它已經被發現很久，但仍然有許多新手和經驗豐富的開發者們忽略了它對頁面佈局的影響。我們一起來看看吧！
元素之間空白的產生及解決方案
在學習元素之間空白的產生之前，我們需要知道塊級元素與行內元素的區別
塊級元素是會獨佔一行的，按垂直方向排列。
行內元素不會佔據整行，在一條直線上排列，都是同一行，按水平方向排列
除了塊級元素和行內元素，還有一種行內塊元素，其實質上也是行內元素，所以多個行內塊元素之間也會出現空白間隔的問題。img元素就是典型的行內塊元素，這裡就不舉例了。
從上面我們可以明顯的看出在沒有設定margin的情況下，多個塊級元素之間沒有空白，而是從上到下緊挨這排列的
同樣，行內元素span 也沒有設定margin，但是多個行內元素之間存在空白部分，這是為什麼呢？
因為在html中行內元素間的換行符/空格是有意義的，瀏覽器會在渲染時將行內元素之間的換行符/空格轉換為一定畫素的空白。
那知道了這個原因，就應該很容易地解決這個問題了，我們只需要在寫程式碼的時候，將換行符刪掉不就可以了嗎？來試一試吧
案例1
<div class="box">
<span class="span1">行內元素span</span><span class="span2">行內元素span</span><span class="span3">行內元素span</span>
</div>
<style>
.box{
width:400px;
height: 100px;
border:3px solid #fa0b0b75;
background:#ccc;
}
span{
color:#fff;
}
.span1{
background:bisque;
}
.span2{
background:goldenrod;
}
.span3{
background:yellowgreen;
}
</style>
案例效果如下：
這種方式雖然可以解決元素之間的空白問題，但是當頁面中存在3個及以上的行內元素或者行內塊元素時，這樣刪掉換行符會讓程式碼看起來不清晰，很雜亂，不利於後期維護和修改，所以這種解決方式是不推薦的。
上面提到換行符/空格是有意義的，也就是說換行符/空格是屬於文字，是文字的話，就可以利用font-size來控制它的大小。來試一試吧
案例2
<div class="box">
<span class="span1">行內元素span</span>
<span class="span2">行內元素span</span>
<span class="span3">行內元素span</span>
</div>
<style>
.box{
width:400px;
height: 100px;
border:3px solid #fa0b0b75;
background:#ccc;
font-size:0;
}
span{
color:#fff;
}
.span1{
background:bisque;
}
.span2{
background:goldenrod;
}
.span3{
background:yellowgreen;
}
</style>
案例效果如下：
你會發現span元素消失了，那是因為span的高度與寬度是由裡面的內容撐開的，span繼承了父元素div的 font-size:0屬性，所以裡面的內容看不見，span 也就無法呈現在頁面上。如果想要span顯示，就要在span元素上設定想要的字型大小。
<div class="box">
<span class="span1">行內元素span</span>
<span class="span2">行內元素span</span>
<span class="span3">行內元素span</span>
</div>
<style>
.box{
width:400px;
height: 100px;
border:3px solid #fa0b0b75;
background:#ccc;
font-size:0;
}
span{
color:#fff;
font-size:16px;
}
.span1{
background:bisque;
}
.span2{
background:goldenrod;
}
.span3{
background:yellowgreen;
}
</style>
這裡得到的效果就和案例1的是一樣的。
這種解決方案就是給父元素設定font-size：0；在給需要顯示文字的元素單獨設定文字大小。建議使用這種方式來解決元素之間空白問題。
還有一種方式就是給元素設定浮動，但是注意要給父元素清除浮動防止，父元素高度塌陷。
案例3
<div class="box">
<img src="./img/5.png"/>
<img src="./img/5.png"/>
<img src="./img/5.png"/>
</div>
<style>
.box{
width:400px;
height: 100px;
border:3px solid #fa0b0b75;
background:#ccc;
overflow: hidden;//防止父元素高度塌陷
}
img{
float: left;
width: 100px;
}
</style>
案例效果對比如下：
設定浮動之前：
設定浮動之前：
關於元素浮動導致的父元素塌陷的問題，可以參考【精選】CSS 浮動和清除浮動方法總結-CSDN部落格這篇文章。
解決方案總結
1、去掉換行符和空格（不推薦）
2、給父元素設定font-size：0；在給需要顯示文字的元素單獨設定文字大小。（推薦）
3、給行內元素或者行內塊元素設定浮動，但是要注意給父元素清除浮動，防止父元素高度塌陷。
行內塊的幽靈空白問題
可能有很多人不知道行內塊的幽靈空白是什麼？其實這是在開發中常常會遇到的問題。你可能就遇到過，只是不清楚是什麼問題，下面這張圖讓你明白什麼是行內塊的幽靈空白。這裡就用典型的行內塊元素img來舉例。
上圖紅框中就是行內塊產生的幽靈空白部分，那它是怎麼產生的呢？
當在一個沒有設定高度的塊元素中新增了一個行內塊元素時，幽靈空白部分就會產生。其實這麼說也不是很準確。
大家都知道其實圖片垂直對齊方式預設是以文字的基線對齊的，那麼這就和字母代表x和g就很大的關係了。
從上圖中可以看到字母x以基線對齊的標準字母，而字母g的下半部分是超出基線的位置的，為了字母g可以完整的出現，頁面中會預留出一點位置，幽靈空白部分部分就產生了。
字母x和g代表的是字母中的兩種呈現方式。
關於文字對齊這裡就不多說了，後面我會詳細的大家說的。
我們怎麼來解決這個問題呢？前面提到圖片垂直對齊方式預設是以文字的基線對齊的，那改變它的垂直對齊方式是否可以解決這個問題呢？改變圖片的對齊方式我們可以用vertical-align這個屬性，來試一試吧！
案例4
<div class="box">
<img src="./img/5.png"/>xy
</div>
<style>
.box{
width:400px;
border:1px solid #fa0b0b75;
background:blanchedalmond;
}
img{
vertical-align:bottom
}
</style>
案例效果如下：
從上圖我們可以看到幽靈空白部分消失了，所以透過給圖片改變其預設的垂直對齊方式是可以解決這個問題的。具體設定哪一種垂直對齊方式要看網頁設計需求，這是一種比較推薦的解決方案。vertical-align屬性的取值如下：
| 屬性 | 屬性值 | 含義 |
|---|---|---|
| vertical-align | baseline (預設值) | 與文字基線對齊 |
| vertical-align | bottom | 與文字底部對齊 |
| vertical-align | middle | 與文字中部對齊 |
| vertical-align | top | 與文字頂部對齊 |
其實也可以直接將行內塊元素轉換為塊元素，撐開父元素就不會存在幽靈空白部分，但前提是父元素中只有行內元素，沒有其他內容，這種方式才起作用。
案例5
<div class="box">
<img src="./img/5.png"/>
</div>
<style>
.box{
width:400px;
border:1px solid #fa0b0b75;
background:blanchedalmond;
}
img{
display: block;
}
</style>
案例效果如下：
上面提到圖片的垂直對齊方式於文字對齊有關係，那麼我們可不可以透過設定文字大小來解決這個問題呢?
其實道理跟案例2是一樣的，同樣給父元素設定font-size：0，如果圖片後面有內容，可以在需要顯示文字的元素單獨設定文字大小，這裡就不舉例子了。
解決方案總結
1、給行內塊元素設定vertical-align，但是注意屬性值不能為baseline，值可以是bottom、 middle、top，根據需求而定。
2、若父元素只有一張圖片，沒有其他內容，將圖片設定為塊元素，即給圖片新增display: block屬性。
3、給父元素設定font-size：0，如果圖片後面有內容，可以在需要顯示文字的元素單獨設定文字大小。
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這裡!! ? 後續繼續更新!!