显示内联块空白
[英]Display inline-block white space
问题描述
Alright, so I'm having this problem where I have a white space above the inline-block element. 
好吧，所以我遇到了这个问题，在行内块元素上方有空白。 Now, here is where the problem comes in. If I remove it or change it to inline, the text will either not go all the way to the center or it won't be the width of one hundred percent. 现在，问题就出在这里。如果我将其删除或将其更改为内联，则文本要么不会一直到达中心，要么不会是100％的宽度。
#green_announcement {
background: rgb(153, 0, 0);
border-top: 2px solid rgb(102, 0, 0);
border-bottom: 2px solid rgb(102, 0, 0);
width: 100%;
height: 25px;
font-weight: bold;
font-size: 17px;
color: rgb(255, 255, 255);
display: inline-block;
text-align: center;
}
<?php
$testing = "Hello";
echo "<div id='green_announcement'>$testing</div>";
?>
Thank you in advance! 先感谢您！
2 个解决方案
解决方案1
0 2016-03-23 23:00:22
Without seeing this on the page, this might not address your specific issue, but it might be a margin above your div, or on an element above it. 如果没有在页面上看到此内容，则可能无法解决您的特定问题，但可能是您的div上方或上方的元素上有一个margin 。 Inspect the element with something such as Chrome's "Inspect" contextual menu option and review the "Elements" tab there to see if you can identify where the unwanted space is coming from. 使用Chrome的“检查”上下文菜单选项检查元素，然后查看那里的“元素”标签，以查看是否可以确定多余空间的来源。 (Tools such as this will show you the computed and inherited styles, so you can see what might be affecting your <div> even if you didn't explicitly put it there.) （诸如此类的工具将向您显示计算出的样式和继承的样式，因此即使您未明确地将其放置在其中，也可以查看可能影响<div> 。）
If I use your CSS and HTML to generate a box, with a colored box right above it, there is no whitespace. 如果我使用CSS和HTML生成一个框，框的上方有一个彩色框，则没有空格。 I think it must be something else. 我认为那一定是另外一回事了。
So, I copied your code into a very simple page, then added a colored box above it, like so: 因此，我将您的代码复制到一个非常简单的页面中，然后在其上方添加了一个彩色框，如下所示：
<html>
<head>
<style>
#green_announcement {
background: rgb(153, 0, 0);
border-top: 2px solid rgb(102, 0, 0);
border-bottom: 2px solid rgb(102, 0, 0);
width: 100%;
height: 25px;
font-weight: bold;
font-size: 17px;
color: rgb(255, 255, 255);
display: inline-block;
text-align: center;
}
</style>
<body>
<div style="background-color: #0f9;">Is there whitespace below this?</div>
<div id='green_announcement'>Hello</div>
</body>
</html>
But this code produces no whitespace above the "green_announcement" block. 但是此代码在“ green_announcement”块上方不产生空格。 See this JSFiddle to see it in action. 请参阅此JSFiddle来查看实际操作。 This leads me to conclude that something else is causing your whitespace issue. 这使我得出结论，是其他原因导致了空白问题。
解决方案2
-1 2016-03-23 22:47:41
Hi Anthony not sure exactly what the problem is, check link and let me know if that helps https://jsfiddle.net/8fvjdfbu/ 嗨，安东尼（Anthony）不确定到底是什么问题，请检查链接，让我知道是否有帮助https://jsfiddle.net/8fvjdfbu/
#green_announcement {
background: rgb(153, 0, 0);
width: 100%;
font-weight: bold;
font-size: 17px;
color: rgb(255, 255, 255);
display: inline-block;
text-align: center;
padding: 5px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.