一 ，樣式書寫底部出現間隙

在dom的實現中，經常會出現底部有間隙，其受多種因素的影響：

在項目的實現中，圖片與底部會出現間隙，其原因是：

類比于圖片前面還有一個寬度為0的空白字符，這里是將其具象化為X，書中將其稱為“幽靈空白節點”

對應的解決方法

圖片塊狀化，就可解決“幽靈空白節點”

line-height足夠的小

font-size足夠的小

vertical-align:top/middle;

二 ，深入了解vertical-align與display：inline-block；的相互影響關系

vertical-align:baseline;面對倆個同時設置了inline-block的元素，展示的現象如下：

有文字時，基線對齊

沒有文字時，底邊框對齊

.dib-baseline {display: inline-block;width: 150px;height: 150px;border: 1px solid #cad5eb;background-color: #f0f3f9; } <span class="dib-baseline"></span> <span class="dib-baseline">x-baseline</span>

圖一：左div是沒有文本，相當于直接塊狀化，直接是底邊框對齊。右div是有文本，相當于直接內聯元素，直接是基線對齊
圖二：是將line-height的高度直接設置為0，字符占據的高度為0，字符的起始高度為字符內容的垂直中心位置，相對于基線的對齊，所以呈現的對齊是文本中心線的對齊

讓icon與文本始終垂直的方法

基于以上所講述的display: inline-block之間的對齊方式，將icon的圖標增加文本內容，則icon標簽與后面的文本天然的基線對齊，實現如下：

<style>.icon__box {line-height: 20px; // 統一的行高顯示}.icon {display: inline-block;width: 20px;height: 20px;white-space: nowrap;letter-spacing: -1em;text-indent: -999em; // 隱藏icon的文本內容展示margin-right: .05rem;}.icon::before {content: '/3000';}.icon_money {background: url(../images/money.png) no-repeat center;}// </style> <p class='icon__box'><i class="icon icon_money">money</i><span style="font-size: 20px;">錢包 - font-size: 20px;</span> </p> // icon內無文本，使用::before的content去添加一個空格 <p class='icon__box'><i class="icon icon_money"></i><span style="font-size: 20px;">錢包 - font-size: 20px;</span> </p>

三，圖標與文字居中對齊的方式

font-size：0；消除空白節點在底部的間距，使用vertical-align：來設置垂直方向的對齊方式
font-size：0時字體的大小足夠小，基線與中線幾乎重合在一起

示例代碼如下：

<style> .text {font-size: 24px;background: gray; } p {margin: 0; } img {height: 100px;background: hotpink; } .icon_box1 {background: #c0c0c0;/* 改變間距 */font-size: 0;margin-bottom: 10px; } .icon__img1 {height: 100px;background: hotpink; } .icon__text1 {display: inline-block;vertical-align: top;/* vertical-align: bottom; */line-height: 100px; } .icon__img3 {font-size: 24px;width: 20px;height: 1ex; } .icon_box2 {background: #c0c0c0;margin-bottom: 10px;font-size: 0; } .icon__img2 {vertical-align: middle; } .icon__text2 {vertical-align: middle;display: inline-block; } </style> <h5>font-size：0,消除空白的間距與底部的間距</h5> <div class="icon_box1"><image class="icon__img1" src="https://pic.qqtn.com/up/2019-9/15690311636958128.jpg"></image><span class="text icon__text1">圖標</span> </div> <h5>都保持vertical-align: middle的居中</h5> <div class="icon_box2"><image class="icon__img2" src="https://pic.qqtn.com/up/2019-9/15690311636958128.jpg"></image><span class="text icon__text2">圖標</span> </div>

總結

以上是生活随笔為你收集整理的图片与文字间出现间隙的原因与解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。