问题描述
在下面的代码中，为什么我需要为两个元素都设置vertical-align: top才能缩小它们之间的距离？如果仅在第一个元素上出现间隙，我是否可以将其设置为vertical-align: top来缩小间隙？
如果仅将{@ {1}}分配了vertical-align属性，则会发生以下情况：
.test这是当我为两个元素都设置垂直对齐时发生的情况：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title></title>
<style>
body{
width: 100vw;
height: 100vh;
margin: 0;
background-color: black;
}
.test {
vertical-align: top;
display: inline-block;
width: 10%;
height: 100px;
background-color: lightblue;
}
hr{
display: inline-block;
width: 100%;
border: thick solid lightgreen;
margin: 0;
}
</style>
</head>
<body>
<div class = "test"></div><hr/>
</body>
</html>解决方法
任何时候处理内联、内联块或表格元素时，您都需要担心垂直对齐。正如 Arbin Shrestha 所说，默认值为 baseline。我不明白的是为什么您无论如何都要对这两个值使用 inline-block 。 hr 是全宽，因此似乎没有必要更改 display 属性。
如果您要对齐顶行中的多个 .test 蓝色块，请将它们全部设置为 display: inline-block; vertical-align: top;，但您不需要更改 display 值对于小时。如果您将 hr 标记保留为默认的 display: block; 值，那么它应该不会与 vertical-align 和 width 混淆。我希望这就是你要找的。看这里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
width: 100vw;
height: 100vh;
margin: 0;
background-color: black;
}
.test {
vertical-align: top;
display: inline-block;
width: 10%;
height: 100px;
background-color: lightblue;
}
hr{
border: thick solid lightgreen;
background-color: lightgreen;
margin: 0;
}
</style>
</head>
<body>
<div class = "test"></div>
<div class = "test"></div>
<div class = "test"></div>
<hr/>
</body>
</html>这是因为所有的inline-block和inline元素的“垂直对齐”属性默认设置为“ 默认”。
查看此处以获取更多详细信息：