解决行内元素之间的间隔bug问题

最新推荐文章于 2021-11-23 11:28:35 发布

孑思

最新推荐文章于 2021-11-23 11:28:35 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： bug 行内元素间隔

本文链接：https://blog.csdn.net/ktutu/article/details/53445708

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

解决行内元素中间有空隙得意
产生原因：换行符、tab、空格产生空隙
解决方法：
1.元素写成一行
存在问题：代码混乱

<span href="#" class="page-prev">&lt;</span><span href="#" class="page-current">1</span><a href="#">2</a><a href="#">3</a>

2.在根容器里设置font-size:0; 子容器里设置font-size:14px;（推荐）

因为 font-size 是一个会继承的属性，当父容器定义了这个属性，下面的子元素（孙元素）都会继承这个属性。视频的例子中，当为外面容器div添加 font-size:0 的时候，div下面的所有 span 和 a 标签都继承了这个样式，字体大小变为了 0px，所以看不到任何数字内容了；当为其它类添加 font-size:14px 后，这个属性覆盖了父容器继承下来的属性（CSS的后来居上原则），因此 div 下的 span 和 a 标签里的数字内容就恢复了正常。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页页码</title>
    <style>
        .page-normal{
            color:#ff6500;
            text-align: center;
            font-size:0;
            margin-top:200px;
        }
        .page-normal a,.page-normal .page-current,.page-normal .page-prev{
            padding:5px 7px;
            font-size:14px;
            margin-left:10px;
        }
        .page-normal a{
            border:1px solid #ff9600;
            color:#ff6500;
            text-decoration:none;
        }
        .page-normal a:hover{
            border:1px solid #ff6500;
            background-color:#ffbe94;
        }
        .page-normal .page-current{
            border:1px solid #ff6500;
            color:#ff6500;
            background-color:#ffbe94;
        }
        .page-normal .page-prev{
            border:1px solid #ffe3c6;
            color:#ffe3c6;
        }
        .ellipsis{
            font-size:14px;
            border:none;
            margin-left: 8px;
        }

    </style>
</head>
<body>
    <div class="page-normal">
        <span href="#" class="page-prev">&lt;</span>
        <span href="#" class="page-current">1</span>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <span class="ellipsis">...</span>
        <a href="#">200</a>
        <a href="#">201</a>
        <a href="#">&gt;</a>
    </div>
</body>
</html>