行块盒的空白折叠：常用来做分页

最新推荐文章于 2023-01-23 11:12:58 发布

_处女座程序员的日常

最新推荐文章于 2023-01-23 11:12:58 发布

阅读量393

点赞数 1

分类专栏：前端 css 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_42931285/article/details/124264031

版权

前端同时被 2 个专栏收录

359 篇文章 12 订阅

订阅专栏

css

108 篇文章 0 订阅

订阅专栏

行块盒

display：inline-block 的盒子

不独占一行
盒模型中所有尺寸都有效。

空白折叠

空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .pager a {
            border: 1px solid #e1e2e3;
            text-decoration: none;
            color: #38f;
            width: 34px;
            height: 34px;
            display: inline-block;
            text-align: center;
            line-height: 34px;
        }

        .pager a:hover {
            border-color: #38f;
            background: #f2f8ff;
        }

        .pager a.selected {
            border: none;
            color: #000;
            background: initial;
        }
    </style>
</head>

<body>
    <div class="pager">
        <a href="">1</a>
        <a href="">2</a>
        <a href="" class="selected">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="">10</a>
    </div>
</body>

</html>

在这里插入图片描述
问题：
行块盒之前的间隙哪里来的？

a之间有很多空格，会折叠成一个空格。

如何排成一排？
1.去除换行符，将所有的a排在一行；
2.将a设置为浮动；
3.将div的display设置为flex。

_处女座程序员的日常

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
行块盒的空白折叠：常用来做分页

行块盒display：inline-block 的盒子不独占一行盒模型中所有尺寸都有效。空白折叠空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0".
复制链接

扫一扫