行内块中的额外高度

Question

问。如何删除 div#inlineblock 底部多余的 space？它为什么在那里？

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

谢谢。

Answer 1

#inlineblock底部的space实际上是hr的边距。如果您重置该边距，您会看到 'space' 消失。

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>

Answer 2

所以这里发生的是你的 <hr /> 有一个边距（对于 <hr /> 元素是正常的）并且它被不同地对待。

在 #block 的情况下，它受到 margin collapsing 的约束，但在 #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。

Answer 3

margin-bottom(and top) default for hr element is 8px, you must set it to 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>

Answer 4

您还可以使用以下内容：

div#inlineblock {
   margin-top: 0px;
}

行内块中的额外高度

Extra height in inline-block

html

css

display