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

内联元素之间的 white-space （与内联单词之间的空格相同）。这不是保证金。

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

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

您也忘了将单位设置为#container（px）。

的宽度

Answer 2

我稍微编辑了你的CSS。有2个错误：

*{
margin: 0;
padding: 0;
}

body{
background: black;
}

#container {
width: 960px; /* note: "px" - a unit is necessary */
margin: 0 auto;
}

.wrapper {
display: inline-block;
float: left; /* note: "left" - float "center" does not work */
}

.box {
width: 240px;
height: 240px;
background: white;
}

现在代码按照你的描述工作。 1个大广场，中间没有间隙。

Answer 3

我无法解释原因，但我发现将font-size: 0;添加到#container选择器修复了此问题。

http://jsfiddle.net/fwwzba14/2/

幻影保证金来自某个地方

3 个答案: