内联块中的额外高度
[英]Extra height in inline-block
问题描述
Q. How do I remove the extra space at the bottom of the div#inlineblock ? 
问：如何删除div#inlineblock底部的多余空间？ Why is it there? 为什么在那儿？
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>
I appreciate good references. 我感谢很好的参考。 :P ：P
Thanks. 谢谢。
4 个解决方案
解决方案1
1 2017-08-14 13:45:52
The space at the bottom of #inlineblock is actually the margin of the hr . #inlineblock底部的空间实际上是hr的边距。 If you reset that margin, you'll see the 'space' disappear. 如果您重新设置该边距，您会看到“空格”消失了。
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>
解决方案2
1 已采纳 2017-08-14 13:46:35
So what's happening here is that your <hr /> has a margin (as is normal for <hr /> elements) and it's being treated differently. 因此，这里发生的是您的<hr />有一个边距（对于<hr />元素来说是正常的），并且它的处理方式有所不同。
In the case of #block , it's being subject to margin collapsing but in #inlineblock it isn't. 在#block的情况下，它会发生边际崩溃，但在#inlineblock则不是。
You can resolve this by specifying margin-bottom:0 on your hr elements. 您可以通过在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>
You'll notice this now pushed the two elements together, so you may need to add a margin-bottom to your div s depending on the exact effect you want. 您会注意到这现在将两个元素推到了一起，因此您可能需要根据想要的确切效果在div添加一个margin-bottom 。
解决方案3
0 2017-08-14 13:49:13
margin-bottom(and top) default for
hrelement is8px, you must set it to0px.hr元素的margin-bottom（和top）默认值为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>
解决方案4
-2 2017-08-14 13:56:53
You can also use the following: 您还可以使用以下内容：
div#inlineblock {
margin-top: 0px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.