Question

我试图创建一个包含7个块的C形状，所以我为前3和下3设置了显示内联块，中间块和顶块之间的边距是哪里？最重要的是摆脱它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vanillaJavascript</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="topRow box"></div>
    <div class="topRow box"></div>
    <div class="topRow box"></div>
    <div class="box"></div>
    <div class="bottomRow box"></div>
    <div class="bottomRow box"></div>
    <div class="bottomRow box"></div>
  </div>
</body>
</html>

CSS

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.topRow {
  display: inline-block;
}

.bottomRow {
  display: inline-block;
}

Answer 1

添加font-size：0;通过去除所有边距来完成父容器，但我仍然感兴趣的是为什么顶部和中间块之间的空间最初大于底部和中间。

Answer 2

部分来自div之间的空格，另一部分来自块对齐。你可以只使用div框来实现你的C形状，但没有空格

<div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><br/><div class="box"></div><br/><div class="box"></div><div class="box"></div><div class="box"></div></div>

和样式表

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  line-height: 50px;
  vertical-align: top;
}

请参阅this jsfiddle

div之间的这个空间来自哪里？

2 个答案: