flex 使得行内元素的margin-top 能能作用

flex 和 inline元素

起因: 在书写wx 小程序中，发现 text 模块的 margin-top 一直没起作用，而我跟着临摹打的效果图却表示 text 的margin-top 确实起作用了。这让我误以为 text标签是行内块元素(我也误认为span 也是行内块元素了…),继而误以为是因为 flex 元素和行内块元素排列导致的，然后测试一番，发现并非如此，margin-top依旧起作用了。后面重新审查了一遍代码发现 container 被我打错了， .container 的类样式并没有起作用，修改完成后发现 text的 margin-top 起作用了。神奇！然后查询 margin 失效的原因，看到大多数都是因为元素为inline 元素所导致的，这让我反过来思考, text 是否为行内( inline)元素，将 text标签替换为 view 标签，发现 margint-top 正常，再去查找资料，才知道行内元素(inline) 是无法设置 margin-top和 margin-bottom的，可是一开始的效果表示了 text的 margin-top 确实是起作用了，会不会是 flex 导致行内元素的margin-top 起作用了，用了简单的实例测试了一下，发现确实如此。

测试代码如下:

CSS样式

    <style type="text/css">
        /* .wrap{
            display: flex;
            flex-direction: column;
            background-color:#666;
        } */
        .c1{
            display: block;
            height: 60px;
            width: 60px;
        }
        .c2{
            display: inline;
            margin-top: 300px;
            background-color: aqua;
        }
        span{
            background-color: aqua;
            margin-top: 300px;
        }
    </style>

HTML代码块

<body>
    <div class="wrap">
        <div class="c1"></div>
        <div class="c2">12312312312</div>
        <span>1231231</span>
    </div>
</body>

效果图如下:

为父元素添加了display:flex
为父元素添加了diaplay:flex
没有添加 display:flex

结论：父元素如果使用了 display: flex 能使行内元素(inline) 的margin-top 起作用, margin-bottom 也起作用了。

PS: wx idea 里面的范围提示有点毒，明明 text 作为一个行内元素，加了margin-top 应该是没有作用范围的，可还是显示出来了，让我一度误认为 text 为 inline-block 元素，并且margin-top失效，让我意味前面使用了浮动(float)。而在 chrome 里面的 span 下设置同样的margin-top ，很明显看得出 margin-top 并没有起作用。

原文链接：https://blog.csdn.net/cooker_666/article/details/115439618