jquery - 来自某处的幻影边缘

Question

我希望四个“方形”div 紧密地显示在一起，并具有 0 边距和 0 填充等。因此它们类似于一个大正方形

我用过

*{

 }

选择器和我的浏览器可以识别它，并且通过我的开发工具找不到边距和填充。但仍有空间。非常感谢任何帮助

http://jsfiddle.net/fwwzba14/

HTML

<div id="container">

        <div class="wrapper">
            <div class="box">

            </div>
        </div>
            <div class="wrapper">
            <div class="box">

            </div>
        </div>
            <div class="wrapper">
            <div class="box">

            </div>
        </div>
            <div class="wrapper">
            <div class="box">

            </div>
        </div>




    </div><!-- Container close -->

CSS

*{
margin: 0;
padding: 0;
}

body{
background: black;
}
#container{
width: 960;
margin: 0 auto;
}

.wrapper{
display: inline-block;
float: center;
}
.box{
width: 240px;
height: 240px;

background: white;
}

Answer 1

它是内联元素之间的空白(与内联单词之间的空格相同)。这不是边距。

有several ways删除 inline-block 元素之间的空白，或者您可以使用 float:left; :

* {
    margin: 0;
    padding: 0;
}
body {
    background: black;
}
#container {
    width: 960px;
    margin: 0 auto;
}
.wrapper {
    float: left;
}
.box {
    width: 240px;
    height: 240px;
    background: white;
}

<div id="container">
    <div class="wrapper">
        <div class="box"></div>
    </div>
    <div class="wrapper">
        <div class="box"></div>
    </div>
    <div class="wrapper">
        <div class="box"></div>
    </div>
    <div class="wrapper">
        <div class="box"></div>
    </div>
</div>
<!-- Container close -->

您还忘记设置 #container 的宽度单位 (px)。