Html 如何去除两个儿子之间的空白？_Html_Css

Html 如何去除两个儿子之间的空白？

html css

Html 如何去除两个儿子之间的空白？,html,css,Html,Css,三个师子垂直放置，中间没有空白。这是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:2

三个师子垂直放置，中间没有空白。这是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>


教父{
边框：1px纯黑；
高度：364px；
宽度：364px；
}
教子{
边框：1px纯黑；
高度：100px；
宽度：100px；
填充顶部：20px；
左侧填充：20px；
}
框1
框2
框3

对于垂直显示的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>


教父{
边框：1px纯黑；
高度：364px；
宽度：400px；
}
教子{
边际：0px；
填充：0px；
边框：1px纯黑；
高度：100px；
宽度：100px；
填充顶部：20px；
左侧填充：20px；
显示：内联块；
}
框1
框2
框3

显示的图像如下所示

如何去除水平显示图像之间的所有空白？

< P>添加<代码>浮点：左边；添加<代码>浮动：左也可以使用Flexbox

.son{
显示器：flex；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
边框：1px纯红；
}
李先生{
列表样式：无；
宽度：200px；
高度：200px；
边框：1px纯绿色；
}


一个
两个
三

也可以使用Flexbox

.son{
显示器：flex；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
边框：1px纯红；
}
李先生{
列表样式：无；
宽度：200px；
高度：200px；
边框：1px纯绿色；
}


一个
两个
三

这是使用显示内联块的常见问题，您应该在元素上使用float left，而不是使用'son'类。

这是使用显示内联块的常见问题，与此相反，您应该在“son”类的元素上使用float left。

使用

内联块时出现的一个问题是HTML中的空白变成了屏幕上的可视空间
有几种方法可以删除该空间
像这样：
使用内联块时出现的一个问题是HTML中的空白变成了屏幕上的可视空间
有几种方法可以删除该空间
像这样：
添加的可能重复垂直对齐：顶部至div.son
添加垂直对齐的可能重复：顶部
todiv.son
多一点解释对未来的读者会更有帮助。多一点解释对未来的读者会更有帮助。