如何解決 img 標簽上下出現(xiàn)的間隙
0.前言
我們在平常的開發(fā)過程中恤溶，經(jīng)常需要使用多張圖片柏腻，而使用多張圖片的時候备韧，我們一般會去使用一個列表來對我們的img 進行承裝酱鸭。
Documentimg{height:200px;margin:0;padding:0;border-bottom:1pxsolid red;? ? ? ? }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0;? ? ? ? }
但是這個時候我們發(fā)現(xiàn)了一個問題吗垮，為什么我的圖片下面多出來一條線呀？
Paste_Image.png
這是怎么回事呀凹髓？
我不是已經(jīng)把 img 的外邊距和內(nèi)邊距什么的全部清空了么烁登？
實際上，這其實是inline元素搞的鬼蔚舀。
任何不是塊級元素的可見元素都是內(nèi)聯(lián)元素饵沧，其表現(xiàn)的特性是“行布局”形式。
----《CSS權威指南》
什么意思赌躺？
意思就是狼牺，其實如圖片文字等內(nèi)聯(lián)元素，它默認對齊方式都是和它的父級的 baseline 去進行對齊的礼患，但是你對齊的是 baseline是钥，撐開高度的卻是元素整體的高度（bottom line），這樣肯定就會造成一定的間隙缅叠，也就是我們上文出現(xiàn)的問題了悄泥。
Paste_Image.png
那我們既然知道了這個問題出現(xiàn)的原因，那么解決起來也就簡單多啦肤粱。
1.第一種解決方案
既然是 inline 元素才會發(fā)生這個問題弹囚，那我們自然可以簡單粗暴的解決這個問題，那就是給我們的元素“變個性”领曼，讓它從 inline 變?yōu)?block 不就可以了么鸥鹉？
img{height:200px;margin:0;padding:0;border-bottom:1pxsolid red;display:block;? ? ? ? }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0;? ? ? ? }
2.第二種解決方案
這也太粗暴了，變了性別庶骄，回頭還怎么愉快的玩耍呀毁渗，所以我們要嘗試曲線救活，我們可以去修改一下它的垂直對齊方式呀单刁，這樣是不是就可以了呢祝蝠？
img{height:200px;margin:0;padding:0;border-bottom:1pxsolid red;vertical-align:middle;? ? ? ? }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0;? ? ? ? }
可以看出，這樣也可以實現(xiàn)想要的效果幻碱。
原因在于绎狭，vertical-align 的默認屬性就是 baseline ，我們只要設置了跟 baseline 不一樣的屬性褥傍，都可以避免這個問題儡嘶。
--
baseline默認。元素放置在父元素的基線上恍风。
sub垂直對齊文本的下標蹦狂。
super垂直對齊文本的上標
top把元素的頂端與行中最高元素的頂端對齊
text-top把元素的頂端與父元素字體的頂端對齊
middle把此元素放置在父元素的中部誓篱。
bottom把元素的頂端與行中最低的元素的頂端對齊。
text-bottom把元素的底端與父元素字體的底端對齊凯楔。
length
%使用 "line-height" 屬性的百分比值來排列此元素窜骄。允許使用負值。
inherit規(guī)定應該從父元素繼承 vertical-align 屬性的值摆屯。
3.第三種解決方案
但是修改了對齊方式邻遏，這樣也有可能會造成問題呀，我們可不可以去讓這個元素飄起來呢虐骑？既然你已經(jīng)不在當前文檔流中了准验，你布局的時候自然也就不會參照這個文字去進行對齊了呀。
我們可以去使用浮動廷没。
img{height:200px;margin:0;padding:0;border-bottom:1pxsolid red;float:left;? ? ? ? }ulli{overflow:hidden;? ? ? ? }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0;? ? ? ? }
這樣也可以解決這個問題糊饱，但是請注意，“浮動雖好颠黎，可不要貪杯呦”另锋。
你一定要能夠正確的解決浮動所造成的影響，而且假如你原本就打算去做文字環(huán)繞效果狭归，那么使用浮動一定是你的不二選擇砰蠢。
4.第四種解決方案
假如上面幾種方案全都不能解決你的問題，那么只有祭出我的大殺器了唉铜。
你可以給你的父元素把文字大小設成0。
img{height:200px;margin:0;padding:0;border-bottom:1pxsolid red;? ? ? ? }ulli{font-size:0px;? ? ? ? }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0;? ? ? ? }
既然你是根據(jù) 文字的基線去對齊律杠，我直接把文字給你設沒了潭流，這樣你就沒法定位了吧，但是這種做法柜去，只推薦在你已經(jīng)“急頭白臉死活弄不出來”的時候才去使用的灰嫉。
好啦，今天對這個問題已經(jīng)說明四種解決方案嗓奢，希望看到此文的小伙伴以后都能跳出這個坑啦讼撒。
2016年07月08日15:58:43
李鵬
讀者老爺，如果您覺得還不錯股耽，就賞小的一口吃的吧峻汉。 么么噠
16
×
喜歡的用戶
凈化心靈ing2016.08.15 00:31
Celinda月兒2016.08.10 21:05
HappyBrother1692016.08.06 07:57
0切歸零2016.07.18 21:23
白米飯2016.07.10 13:28
HenryHuang2016.07.10 11:45
嘿七2016.07.10 00:27
x39272016.07.10 00:19
豪哥DvWooooo2016.07.09 22:37
千金裘2016.07.09 08:11
Monty丶2016.07.08 20:03
趙綴空2016.07.08 20:00
雨礫2016.07.08 16:40
冬天徘徊2016.07.08 16:15
伯納烏的傾聽2016.07.08 16:01
2 樓 ·2016.07.08 15:59
誰最帥呀皮仁，我最帥
3 樓 ·2016.07.08 16:03
板凳
4 樓 ·2016.07.08 16:08
5 樓 ·2016.07.08 16:40
蹲坑
Ctrl+Enter 發(fā)表
被以下專題收入，發(fā)現(xiàn)更多相似內(nèi)容：
玩轉簡書的第一步，從這個專題開始岩调。 想上首頁熱門榜么？好內(nèi)容想被更多人看到么诡曙？來投稿吧！如果被拒也不要灰心哦～入選文章會進一個隊...
95236篇文章· 126651人關注
愛前端钠导，在路上，希望結伴而行森瘪。
1156篇文章· 4013人關注
干貨技術文牡属。
1752篇文章· 3321人關注
