即使margin和padding设置为0，div之间的空格也是如此

Question

我正在尝试建立一个供个人使用的CSS框架 我之前在其他项目上遇到过这个问题，但设法通过改变代码来修复它。我不知道为什么会发生这种情况

html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

*{
    box-sizing:border-box;
}

.row{
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.col-sm-1,.col-md-1,.col-lg-1{
    margin:0;
    padding:0;
    display:inline-block;
    width:4.16667%;
    border:1px solid black;
}

    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
    </div>

正如您在代码片段中看到的那样，当您运行时会有空格，从而导致行中的div减少。我尝试用铬检查它，但空白区域显示为身体的一部分。我根本没有边距，也没有填充

Answer 1

问题是内联块之间的空白区域。

<div style="display:inline-block">A</div> <!-- There is a white-space here --><div style="display:inline-block">B</div>

你可以通过无缝地将div包装在一起来避免这种情况（虽然丑陋）：

<div style="display:inline-block"></div
><div style="display:inline-block></div>

这消除了实际解析的标记之间的空格！

避免这种情况的另一种方法是代替

display:inline-block

使用

float:left

然而，

需要

clear:both

最后

Answer 2

更改为显示：block和float：left;并且工作正常。

html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

*{
    box-sizing:border-box;
}

.row{
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.col-sm-1,.col-md-1,.col-lg-1{
    margin:0;
    padding:0;
    display:block;
    float:left;
    width:4.16667%;
    border:1px solid black;
}

    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
        <div class="col-sm-1">
        </div>
    </div>