`margin：0;`不处理子div

Question

我在删除子div的边缘方面遇到了问题。我希望旁边的#overview > div定义正方形。

＆＃13;

＆＃13;

#overview {
  display: inline-block;
  margin: 0em;
  padding: 0em;
  background: green;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin: 0;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}

＆＃13;

<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle

我希望找到一个没有浮动方块的解决方案，而不设置负边距！

感谢您的帮助！

Answer 1

我认为你可以使用

#overview {
  display: flex;
  margin: 0em;
  padding: 0em;
  background: green;
  flex-direction:row;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}

<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>

Answer 2

您需要添加“vertical-align：middle;”你孩子的元素（你的div）

#overview {
  display: inline-block;
  margin: 0em;
  padding: 0em;
  background: green;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}

<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>

Answer 3

那是因为您没有在#overview > div中添加浮动，如下所示。现在根据需要设置保证金值。

#overview > div {
  float:left;
}

Answer 4

浏览器将您的换行符解释为空白，这就是为什么它会添加间距。尝试删除它们（它将是不可读的，但它将修复它而不更改任何CSS）。 html：

<div id="overview">
    <div class="type4"></div><div class="type2"></div><div class="type4"></div><div class="type2"></div><div class="type3"></div><div class="type2"></div><div class="type2"></div>
</div>

你的css：

#overview {
    display: inline-block;
    margin: 0em;
    padding: 0em;
    background: green;
}

#overview > div {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    margin: 0;
    border-bottom: 2px solid black;
}

div.type1 {
    background: #990099;
}

div.type2 {
    background: #000080;
}
div.type3 {
    background: #734d26;
}

div.type4 {
    background: #990000;
}

JSFiddle