Q.如何删除div#inlineblock底部的额外空间？为什么会出现在那里？
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
div#inlineblock {
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>我很欣赏好的参考资料。 :P
谢谢。
所以这里发生的事情是你的<hr />有一个边距(对于<hr />元素来说是正常的(，并且它被区别对待。
在#block的情况下，它受到保证金崩溃的影响，但在#inlineblock它不是。
您可以通过在hr元素上指定margin-bottom:0来解决此问题。
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
margin-bottom: 0; /* NEW */
}
div#inlineblock {
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>您会注意到，这现在将两个元素推到了一起，因此您可能需要根据您想要的确切效果向div添加margin-bottom。
#inlineblock底部的空间实际上是hr的边距。 如果重置该边距，您将看到"空格"消失。
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
div#inlineblock {
display: inline-block;
}
#inlineblock hr {
margin:0;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>
</body>
</html>
hr元素的边距底部(和顶部(默认值为8px，您必须将其设置为0px。
#inlineblock hr {
margin-bottom: 0;
}
div {
width: 150px;
padding-top: 5px;
text-align: center;
background-color: #f3f6db;
font-family: "Arial";
}
hr {
border-color: red;
border-width: 1px 0px;
border-style: solid;
transition: width .2s linear;
}
#inlineblock hr {
margin-bottom: 0;
}
div#inlineblock {
display: inline-block;
}<div id="block"><span>Block</span>
<hr/>
</div>
<div id="inlineblock"><span>Inline Block</span>
<hr/>
</div>您还可以使用以下方法：
div#inlineblock {
margin-top: 0px;
}