課程
/前端開發(fā)
/HTML/CSS
/網(wǎng)頁(yè)簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則
問題如上面講的
2015-12-14
源自：網(wǎng)頁(yè)簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則 3-3
正在回答
換行就意味著兩個(gè)圖片間有了一個(gè)字符 就像是一個(gè)空格占位符
?如果你給img定義float屬性的話就沒有間隙了
解決行內(nèi)元素間隙bug問題
行內(nèi)元素之間會(huì)產(chǎn)生間隙bug問題的場(chǎng)景：
1、當(dāng)行內(nèi)元素之間有“回車”、“tab”、“空格”時(shí)就會(huì)出現(xiàn)間隙。
如下代碼：
<div>? ?<a>1</a>? ?<a>2</a>? ?<span>33333</span>? ?<span>44444</span>? ?<em>555555</em></div>
解決方法：
?1、寫在一行，之間不要有空格之類的符號(hào)。
<div><a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em></div>
2、使用font-size:0
div{font-size:0;}a,span,em{font-size:16px;}
圖片文字等inline元素默認(rèn)是和父級(jí)元素的baseline對(duì)齊的，而baseline又和父級(jí)底邊有一定距離（這個(gè)距離和 font-size，font-family 相關(guān)），所以設(shè)置 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現(xiàn)。而且不光li，其他的block元素中包含img也會(huì)有這個(gè)現(xiàn)象。
解決辦法：
1、：定義圖片img標(biāo)簽vertical-align:bottom，vertical-align:middle，vertical-align:top。
img{vertical-align:bottom;}
2、：定義容器里的字體大小為0。
div?{? width:110px;? border:1px?solid?#000000;? font-size:0; }
qq_Mi_1 提問者
因?yàn)橛袃?nèi)邊距~
舉報(bào)
入門必殺技之結(jié)構(gòu)與表現(xiàn)相分離，課程會(huì)有3個(gè)案例，不同角度講解
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
問題如上面講的
問題如上面講的
2016-02-16
換行就意味著兩個(gè)圖片間有了一個(gè)字符 就像是一個(gè)空格占位符
?如果你給img定義float屬性的話就沒有間隙了
2016-01-19
解決行內(nèi)元素間隙bug問題
行內(nèi)元素之間會(huì)產(chǎn)生間隙bug問題的場(chǎng)景：
1、當(dāng)行內(nèi)元素之間有“回車”、“tab”、“空格”時(shí)就會(huì)出現(xiàn)間隙。
如下代碼：
<div>
? ?<a>1</a>
? ?<a>2</a>
? ?<span>33333</span>
? ?<span>44444</span>
? ?<em>555555</em>
</div>
解決方法：
?1、寫在一行，之間不要有空格之類的符號(hào)。
<div>
<a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em>
</div>
2、使用font-size:0
div{font-size:0;}
a,span,em{font-size:16px;}
2015-12-14
圖片文字等inline元素默認(rèn)是和父級(jí)元素的baseline對(duì)齊的，而baseline又和父級(jí)底邊有一定距離（這個(gè)距離和 font-size，font-family 相關(guān)），所以設(shè)置 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現(xiàn)。而且不光li，其他的block元素中包含img也會(huì)有這個(gè)現(xiàn)象。
解決辦法：
1、：定義圖片img標(biāo)簽vertical-align:bottom，vertical-align:middle，vertical-align:top。
img{vertical-align:bottom;}2、：定義容器里的字體大小為0。
div?{? width:110px;? border:1px?solid?#000000;? font-size:0; }2015-12-14
因?yàn)橛袃?nèi)邊距~