這篇文章主要給大家介紹了解決img標籤上下出現間隙的方法，因為最近在工作中遇到了這個問題，所以想著記錄下來。方便自己或者有需要的朋友們參考借鑑，下面來一起看看吧。
我們在平常的開發過程中，經常需要使用多張，而使用多張的時候，我們一般會去使用乙個列表來對我們的img 進行承裝。
```
document
但是這個時候我們發現了乙個問題，為什麼****多出來一條線呀？
這是怎麼回事呀？
我不是已經把 img 的外邊距和內邊距什麼的全部清空了麼？
實際上，這其實是inline元素搞的鬼。
任何不是塊級元素的可見元素都是內聯元素，其表現的特性是「行布局」形式。----《css權威指南》
什麼意思？
意思就是，其實如文字等內聯元素，它預設對齊方式都是和它的父級的 baseline 去進行對齊的，但是你對齊的是 baseline，撐開高度的卻是元素整體的高度（bottom line），這樣肯定就會造成一定的間隙，也就是我們上文出現的問題了。
那我們既然知道了這個問題出現的原因，那麼解決起來也就簡單多啦。
1.第一種解決方案
既然是 inline 元素才會發生這個問題，那我們自然可以簡單粗暴的解決這個問題，那就是給我們的元素「變個性」，讓它從 inline 變為 block 不就可以了麼？
? 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<styletype="text/css">
img
ul
2.第二種解決方案
這也太粗暴了，變了性別，回頭還怎麼愉快的玩耍呀，所以我們要嘗試曲線救活，我們可以去修改一下它的垂直對齊方式呀，這樣是不是就可以了呢？
? 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<styletype="text/css">
img
ul
可以看出，這樣也可以實現想要的效果。
原因在於，vertical-align 的預設屬性就是 baseline ，我們只要設定了跟 baseline 不一樣的屬性，都可以避免這個問題。
3.第三種解決方案
但是修改了對齊方式，這樣也有可能會造成問題呀，我們可不可以去讓這個元素飄起來呢？既然你已經不在當前文件流中了，你布局的時候自然也就不會參照這個文字去進行對齊了呀。
我們可以去使用浮動。
? 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<styletype="text/css">
img
ul li
ul
這樣也可以解決這個問題，但是請注意，「浮動雖好，可不要貪杯呦」。
你一定要能夠正確的解決浮動所造成的影響，而且假如你原本就打算去做文字環繞效果，那麼使用浮動一定是你的不二選擇。
4.第四種解決方案
假如上面幾種方案全都不能解決你的問題，那麼只有祭出我的大殺器了。
你可以給你的父元素把文字大小設成0。
? 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<styletype="text/css">
img
ul li
ul
既然你是根據 文字的基線去對齊，我直接把文字給你設沒了，這樣你就沒法定位了吧，但是這種做法，只推薦在你已經「急頭白臉死活弄不出來」的時候才去使用的。
總結
解決img標籤上下出現間隙的方法
與父元素下邊緣有 2px 的間隙，並不是因為空格。多個 inline block 元素之間的間隙才是因為空格。任何不是塊級元素的可見元素都是內聯元素，其表現的特性是 行布局 形式。css權威指南 如文字等內聯元素，它預設對齊方式都是和它的父級的 baseline 去進行對齊的，但是你對齊的是 bas...
spring bean標籤上的常用屬性
bean標籤的唯一識別符號，在 spring 容器中，只能存在唯一的 id不能重複，否則報錯。datasource name ds,ds2 class com.alibaba.druid.pool.druiddatasource bean druiddatasource datasource ac....
H5標籤input標籤上傳檔案
function uploadimg var e window.event event 獲取當前選中的檔案 var ofile e.target.files 0 console.log ofile 列印值看下面,簡單點的話我們直接把這個資料給後台處理就可以了 新增進度條 上傳進度 var e win...