div之间不需要的空间。无法摆脱它

Question

此处显示我的问题的图片

包装器的CSS是

display: block;
text-align: center;

每个DIV的CSS是

margin: 30px 10px;
display: inline-block;
height: 100%;
text-align: center;
width: 30%;

可能导致这种情况的原因是什么？我尝试摆弄flex但结果是一样的。

Answer 1

你说你摆弄了flexbox。然而，要使用它，你不应该只是摆弄它，而是研究它是如何工作的。

要实现您想要的效果，请在包装div上使用display: flex;并从包含的height中删除div属性。

运行此可视示例以查看其工作原理：

＆＃13;

＆＃13;

.parent {
  padding: 20px;
  background: red;
  width: 400px;
  height: 100px;
  display: flex;
}

.child-1 {
  background: yellow;
  width: 100px;
}

.child-2 {
  background: orange;
  width: 100px;
}

＆＃13;

<div class="parent">
  <div class="child-1">
    Hello
  </div>
  <div class="child-2">
    Multi
    <br>
    Line
    <br>
    Content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;