昨天切页面时，进行布局时，想改变以下方法换换口味，所以就抛弃了float方法，采用了display:inline-block方法，没想到却随之而来的带来了一个想不通的问题，那就是空白。废话不多说，上代码。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head> <body> <ul class="box"> <li>li</li> <li>li</li> <li>li</li> <li>li</li> </ul></body></html>效果如上图所示，每个li之间都会有空格，这影响到我们对页面的布局。
一、造成的原因
inline-block水平呈现的元素之间，如果有换行或空格分隔，那么元素之间会有间距。
立即学习“前端免费学习笔记（深入）”；
二、解决的方法
1、去除元素间的空白或者换行
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head> <body> <ul class="box"> <strong> <li>li</li><li>li</li><li>li</li><li>li</li></strong> </ul></body></html><br /><br /><br />
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head> <body> <ul class="box"> <li> li</li><li> li</li><li> li</li><li> li</li> </ul></body></html> <br />
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head> <body> <ul class="box"> <li>li</li ><li>li</li ><li>li</li ><li>li</li> </ul></body></html><br /><br />
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head> <body> <ul class="box"> <li>li</li><!-- --><li>li</li><!-- --><li>li</li><!-- --><li>li</li> </ul></body></html><br /><br /><br />2、利用margin负外边距
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> li{ width:50px; height:20px; background-color:#C90; display:inline-block; margin-right:-8px;}//不过这个间距是根据字体的大小来调的，不具有普适性</style></head> <body> <ul class="box"> <li>li</li> <li>li</li> <li>li</li> <li>li</li> </ul></body></html>3、因为空白字符也是字符，所以可以设置父元素的font-size：0，子元素重新定义font-size大小；但是这种方法在Safari中是无效的。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> .box{ font-size:0;} li{ width:50px; height:20px; background-color:#C90; display:inline-block; font-size:12px;}</style></head> <body> <ul class="box"> <li>li</li> <li>li</li> <li>li</li> <li>li</li> </ul></body></html>4、使用letter-spacing
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> .box{ letter-spacing:-8px;} li{ width:50px; height:20px; background-color:#C90; display:inline-block; letter-spacing:normal;}</style></head> <body> <ul class="box"> <li>li</li> <li>li</li> <li>li</li> <li>li</li> </ul></body></html><br /><br />//Opera浏览器下问题：最小间距1像素，然后，letter-spacing再小就还原了5、使用word-spacing
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css"> .box{ word-spacing:-8px;} li{ width:50px; height:20px; background-color:#C90; display:inline-block; word-spacing:normal;}</style></head> <body> <ul class="box"> <li>li</li> <li>li</li> <li>li</li> <li>li</li> </ul></body></html>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
262
收藏
