無標題文章

如何解決 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

4條評論(按時間正序·按時間倒序·按喜歡排序添加新評論

MR_LP

2 樓 ·2016.07.08 15:59

誰最帥呀皮仁,我最帥

喜歡(0)回復

超大檸檬霸

3 樓 ·2016.07.08 16:03

板凳

喜歡(0)回復

小安安945

4 樓 ·2016.07.08 16:08

喜歡(0)回復

雨礫

5 樓 ·2016.07.08 16:40

蹲坑

喜歡(0)回復

Ctrl+Enter 發(fā)表

被以下專題收入,發(fā)現(xiàn)更多相似內(nèi)容:

首頁投稿

添加關注

玩轉簡書的第一步,從這個專題開始岩调。 想上首頁熱門榜么?好內(nèi)容想被更多人看到么诡曙?來投稿吧!如果被拒也不要灰心哦~入選文章會進一個隊...

95236篇文章· 126651人關注

Web前端之路

添加關注

愛前端钠导,在路上,希望結伴而行森瘪。

1156篇文章· 4013人關注

技術文

添加關注

干貨技術文牡属。

1752篇文章· 3321人關注

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市扼睬,隨后出現(xiàn)的幾起案子逮栅,更是在濱河造成了極大的恐慌,老刑警劉巖痰驱,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件证芭,死亡現(xiàn)場離奇詭異,居然都是意外死亡担映,警方通過查閱死者的電腦和手機废士,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蝇完,“玉大人官硝,你說我怎么就攤上這事《掏桑” “怎么了氢架?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長朋魔。 經(jīng)常有香客問我岖研,道長,這世上最難降的妖魔是什么警检? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任孙援,我火速辦了婚禮,結果婚禮上扇雕,老公的妹妹穿的比我還像新娘拓售。我一直安慰自己,他們只是感情好镶奉,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布础淤。 她就那樣靜靜地躺著,像睡著了一般哨苛。 火紅的嫁衣襯著肌膚如雪鸽凶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天建峭,我揣著相機與錄音吱瘩,去河邊找鬼。 笑死迹缀,一個胖子當著我的面吹牛使碾,可吹牛的內(nèi)容都是我干的蜜徽。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼票摇,長吁一口氣:“原來是場噩夢啊……” “哼拘鞋!你這毒婦竟也來了?” 一聲冷哼從身側響起矢门,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤盆色,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后祟剔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體隔躲,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年物延,在試婚紗的時候發(fā)現(xiàn)自己被綠了宣旱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡叛薯,死狀恐怖浑吟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情耗溜,我是刑警寧澤组力,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站抖拴,受9級特大地震影響燎字,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜阿宅,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一候衍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧家夺,春花似錦、人聲如沸伐弹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惨好。三九已至煌茴,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間日川,已是汗流浹背蔓腐。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留龄句,地道東北人回论。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓散罕,卻偏偏與公主長得像,于是被迫代替她去往敵國和親傀蓉。 傳聞我的和親對象是個殘疾皇子欧漱,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容