在div中使用了span标签，设置margin时，只有margin-left、margin-right生效，margin-bottom、margin-top设置不起效。

原因：

因为行内元素的上下外边距（margin）不会影响其周围的元素布局

解决方案：

display: inline-block;
父元素改成 display: flex;
子元素设置float: left;

疑惑：

为什么将父级元素的 display 属性设置为 flex 后 margin-top 和 margin-bottom 可以生效? 将父级元素的 display 属性设置为 flex 后，margin-top 和 margin-bottom 可以生效的原因主要有以下几点：

弹性盒子模型的特点：Flexbox（弹性盒子模型）是一个一维布局模型，它允许子元素（flex items）在容器（flex container）内沿着主轴（main axis）或交叉轴（cross axis）进行灵活的对齐和分布。在Flexbox中，子元素不再受到行内元素或块级元素的传统布局限制。这意味着即使子元素原本是行内元素，它们现在也可以像块级元素一样，在其周围拥有并响应 margin 属性创建的空间。
外边距的合并问题：在标准的文档流中，垂直方向上的相邻外边距（margin）会发生合并（margin collapsing）。这意味着如果两个元素相邻，并且它们都有垂直外边距，那么这两个外边距只会取其中较大的一个，而不是相加。然而，在Flexbox布局中，这种外边距合并的行为不会发生。因此，即使子元素设置了 margin-top 或 margin-bottom，这些值也会按照预期独立生效，而不会与其他元素的边距合并。
更强大的布局控制：Flexbox 提供了比传统布局模型更强大和灵活的布局控制能力。通过将父级元素设置为 flex 容器，您可以更精确地控制子元素的对齐、分布、尺寸和间距。这意味着即使子元素原本是行内元素，您也可以利用 Flexbox 的特性来使它们表现得像块级元素，包括允许 margin-top 和 margin-bottom 起效。

综上所述，将父级元素的 display 属性设置为 flex 可以使子元素的 margin-top 和 margin-bottom 生效，这主要是因为 Flexbox 提供了更强大和灵活的布局控制能力，并且避免了传统布局中可能存在的外边距合并问题。

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 500px;
            height: auto;
            border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
        }

        ul,
        li,
        div,
        span {
            padding: 0;
            margin: 0;
            /* padding-inline-start: 40px; */
        }

        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }



        ul li {
            height: 40px;
            list-style: none;
            padding: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
            margin-right: 20px;
            background-color: antiquewhite;
            border: 1px solid blue;
            border-radius: 8px;
        }

        div span {
            float: left;
            /* margin-right: 10px; */
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
            margin-right: 20px;
            padding: 20px;
            background-color: rgb(221, 137, 28);
            border: 1px solid rgb(20, 20, 20);
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <!-- ul和li都是块级元素 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
    </ul>
    <hr>
    <h1>元素之间的空白符（空格、回车换行等）都会被浏览器转换成一个空白字符，这个字符的大小受font-size影响 </h1>
    <p> 全部写在同一行是不太可能的，给父元素添加 font-size:0; 在给span额外添加font-size:; 　但这种方法也存在问题，先是font-size被重写一次(First Blood)，</p>
    <p>再者是一些老版本的浏览器下依旧会有间隙(Double Kill)或者有些浏览器对于font-size:12px;的支持不友好(Trible Kill)。</p>
    <p> 给span加上浮动也可以，但是会脱离文档流 高度是撑不开的</p>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
        <span>13</span>
        <span>14</span>
        <span>15</span>
        <span>16</span>

    </div </body>

</html>

参考：

blog.csdn.net/weixin_4473…