影响布局的inline-block的空白符的问题

最新推荐文章于 2021-03-01 15:58:46 发布

web_qdkf

最新推荐文章于 2021-03-01 15:58:46 发布

阅读量654

点赞数

本文讨论了inline-block元素之间出现空白符的问题及其解决方法，包括去除空白符、使用margin负外边距、设置父元素font-size为0、应用letter-spacing和word-spacing属性等。同时提供了代码示例来直观展示每种方法的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
        <li>li</li><li>li</li><li>li</li><li>li</li>
    </ul>
</body>
</html>

<!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>

<!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>

<!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>

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>

//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>

原文链接地址:http://www.cnblogs.com/happyLee/p/5094932.html