Question

垂直放置三个div.sons，它们之间没有空白。这是css代码和显示的图像。

<html>
<header>
<style type="text/css">
div.father {
  border: 1px solid black;
  height: 364px;
  width: 364px;

}
div.son {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  padding-top:20px;
  padding-left:20px;
}
</style>

</header>
<body>
    <div class="father">
    <div class="son">box1</div> 
    <div class="son">box2</div>
    <div class="son">box3</div>
    </div>
</body>
</html>

对于垂直显示的div.son，div.sons之间没有空白。

现在让我们将所有div.sons水平显示。

<html>
<header>
<style type="text/css">
div.father {
  border: 1px solid black;
  height: 364px;
  width: 400px;

}
div.son {
  margin:0px;
  padding:0px;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  padding-top:20px;
  padding-left:20px;
  display:inline-block;
}
</style>

</header>
<body>
    <div class="father">
    <div class="son">box1</div> 
    <div class="son">box2</div>
    <div class="son">box3</div>
    </div>
</body>
</html>

显示的图像如下。

如何删除水平显示图像的div.sons之间的所有空白？

Answer 1

在css中为子类添加float: left;

Answer 2

使用inline-block时出现的一个问题是HTML中的空格成为屏幕上的可视空间。

有几种方法可以删除该空间

像这样： https://jsfiddle.net/j6rcfkmz/

Answer 3

也可以使用 Flexbox 。

＆＃13;

.son {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  border: 1px solid red;
}
.son li {
  list-style:none;
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

＆＃13;

<ul class="son">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

＆＃13;

Answer 4

这是使用display inline-block的一个常见问题，而不是这样你应该在带有＆＃39; son＆＃39;类的元素上使用float left。

如何删除div.sons之间的空白？

4 个答案: