display:inline-flex; 导致奇怪的盒子模型渲染

Question

display:inline-flex; 导致奇怪的盒子模型渲染

nev*_*ess 1 html css less flexbox

我最近遇到了一些奇怪的东西,我不想与你分享,也许有人知道为什么会这样.

因为我没有足够的代表我需要链接截图:

均匀 - 无间距

在此输入图像描述

奇数 - 间距

在此输入图像描述

如您所见,没有边距,填充或其他一些间距定义,浏览器知道这一点.但仍然有这种奇怪的间距,我绝对不知道为什么.

减:

@grd-height  : 110px;
@grd-width   : @grd-height;
@grd-per-line: 4;

.grd {

    width: (@grd-width * @grd-per-line) + 15%;

    .data {

        display: inline-flex;
        height: @grd-height;
        width: @grd-width;
        padding: 0px;

    }
    .data:nth-child(even) {
        background: #eee;   
    }

}

Run Code Online (Sandbox Code Playgroud)

(我把15%放在那里为我的测试解决这个问题)

HTML:

    <body>

        <section class='grd'>
            <section class='data'>hello world</section>
            <section class='data'>what</section>
            <section class='data'>are </section>
            <section class='data'>you doing</section>
            <section class='data'>hello world</section>
            <section class='data'>what</section>
            <section class='data'>are </section>
            <section class='data'>you doing</section>
            <section class='data'>hello world</section>
            <section class='data'>what</section>
            <section class='data'>are </section>
            <section class='data'>you doing</section>
            <section class='data'>hello world</section>
            <section class='data'>what</section>
            <section class='data'>are </section>
            <section class='data'>you doing</section>
        </section>

    </body>

Run Code Online (Sandbox Code Playgroud)

最后一点:我使用Prepros App编译较少的代码.

Answer 1

Mr.*_*ien 10

这是white space你的HTML文档中添加了一个4px偏移,因为你正在使用display: inline-flex;...我只是将所有标记内联并立即查看它的行为

还有很多方法可以摆脱空白区域,既可以font-size: 0;在父元素上使用,也可以font-size在子元素上设置背面,或者也可以使用HTML空白注释</section><section>

演示 (越野车演示)

演示2

此外,值得一提的是,你需要设置你width的115px其他你将得到一个棋盘布局,因为你刚刚保存5px了每个元素中的空白区域.

归档时间：	11 年，10 月前
查看次数：	6404 次
最近记录：	11 年，10 月前