使用font-size：0 來去掉inline-block元素之間的空隙方法
發(fā)布時間：2011-08-02 11:43:46 作者：佚名 
我要評論
我要評論像下面圖中的布局，如果排列的元素是等高的話，相信很多人都會使用浮動來布局，不過如果元素不等高的話，不添加多余的標(biāo)簽，浮動布局是很難實(shí)現(xiàn)下圖中的效果。如果遇到這種情況，可以使用inline-block來布局。
像下面圖中的布局，如果排列的元素是等高的話，相信很多人都會使用浮動來布局，不過如果元素不等高的話，不添加多余的標(biāo)簽，浮動布局是很難實(shí)現(xiàn)下圖中的效果。如果遇到這種情況，可以使用inline-block來布局。
現(xiàn)代瀏覽器的最新版都支持inline-block，只有該死的ie6、7不支持inline-block，但ie6、7可以通過 display：inline；zoom：1；來模擬。
下面是inline-block兼容的代碼：
view sourceprint?display:inline-block;*display:inline;*zoom:1;width:100px;vertical-align:top;
但是大家有沒有發(fā)現(xiàn)，在firefox，safari，opera，ie8+中的 inline-block 元素之間會莫名其妙多出3px的間距，其實(shí)這個是換行符，如果將 inline-block 元素間的換行符去掉，這3px的間距就會消失了。
有沒有在不影響代碼美觀的情況下去掉間距尼，答案是有的。可以在inline-block的父元素中加上 font-size：0；然后在 inline-block講字體設(shè)回來。
view sourceprint?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:400 12px/1.5 arial,sans-serif}
li,.inline-block{display:inline-block;width:100px;background:#cdcdcd;font-size:12px;*display:inline;*zoom:1;vertical-align:top;}
view sourceprint? .box{margin-top:10px;}
.font0{font-size:0;}
</style>
</head>
<body>
<h1>寫成一行的 line-block</h1>
<ul>
<li>我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<h1>有換行符的 line-block</h1>
<ul>
<li>我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
</div>
<h1>父級使用了font-size:0的 line-block</h1>
<ul class="font0">
<li>我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box font0">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
</div>
</body>
</html>
現(xiàn)代瀏覽器的最新版都支持inline-block，只有該死的ie6、7不支持inline-block，但ie6、7可以通過 display：inline；zoom：1；來模擬。
下面是inline-block兼容的代碼：
view sourceprint?display:inline-block;*display:inline;*zoom:1;width:100px;vertical-align:top;
但是大家有沒有發(fā)現(xiàn)，在firefox，safari，opera，ie8+中的 inline-block 元素之間會莫名其妙多出3px的間距，其實(shí)這個是換行符，如果將 inline-block 元素間的換行符去掉，這3px的間距就會消失了。
有沒有在不影響代碼美觀的情況下去掉間距尼，答案是有的。可以在inline-block的父元素中加上 font-size：0；然后在 inline-block講字體設(shè)回來。
復(fù)制代碼
代碼如下:view sourceprint?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:400 12px/1.5 arial,sans-serif}
li,.inline-block{display:inline-block;width:100px;background:#cdcdcd;font-size:12px;*display:inline;*zoom:1;vertical-align:top;}
view sourceprint? .box{margin-top:10px;}
.font0{font-size:0;}
</style>
</head>
<body>
<h1>寫成一行的 line-block</h1>
<ul>
<li>我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<h1>有換行符的 line-block</h1>
<ul>
<li>我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
</div>
<h1>父級使用了font-size:0的 line-block</h1>
<ul class="font0">
<li>我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li>
<li>我是inline-block 我是inline-block 我是inline-block</li>
</ul>
<div class="box font0">
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div>
<div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div>
</div>
</body>
</html>
相關(guān)文章
css中font的簡寫方法(包括粗細(xì)、大小、行高、字體)
css中font的簡寫方法（包括font-weight，font-size,line-height,font-family） 也就是粗細(xì)、大小、行高、字體等等，把它們合在一起寫，需要的朋友可以參考下2013-12-12- 造成IE6.0下多出來高度的原因是因?yàn)闆]有給div定義字體大小的情況下，默認(rèn)是font-size;12px所以給font-size定義為0就可以解決問題了2013-11-14
- css中文字體font-family列表主要是系統(tǒng)自帶的一些、裝Office會生出來的一些、Windows的一些，感興趣的朋友可以了解下2013-10-10
font-weight 屬性設(shè)置文本的粗細(xì)介紹
css中的font-weight 屬性可以設(shè)置文本的，想必大家都對它有所了解了，該屬性用于設(shè)置顯示元素的文本中所用的字體加粗，感興趣的朋友可以了解下2013-09-16- CSS font-family字體樣式設(shè)置屬性知識教程篇，CSS font-family-CSS字體樣式知識教程。在網(wǎng)頁中我們常常對網(wǎng)頁中文字設(shè)置字體，我們即可使用font-family實(shí)現(xiàn)字體樣式設(shè)置2013-05-02
- font 屬性的快捷寫法有利于提高書寫效率，本文整理了一些，需要了解的朋友可以參考下2012-12-21
- 直接使用中文名稱時，在不支持中文的系統(tǒng)或編碼的頁面就有可能會無法正常顯示。如果使用Unicode碼的話又不方便記憶2012-05-03
使用font-size：0px 來制作跨瀏覽器的inline-block css屬性
像下面圖中的布局，如果排列的元素是登高的話，相信很多人都會使用浮動來布局，不過如果元素不等高的話，不添加多余的標(biāo)簽，浮動布局是很難實(shí)現(xiàn)下圖中的效果。如果遇到這種2011-07-29- CSS可以利用字體屬性設(shè)置頁面中字體的種類、大小、風(fēng)格、粗細(xì)（濃淡）等表現(xiàn)。2011-01-05
- CSS的字體樣式設(shè)置相信許多人再熟悉不過，其實(shí)字體樣式的設(shè)置并不僅僅限于我們平時常用的那幾個屬性，本文為您詳細(xì)敘述 font-size 的字體樣式設(shè)置的詳細(xì)屬性。2009-08-29