Question

好吧，所以我遇到这个问题，我在内联块元素上方有一个空格。现在，问题出现在这里。如果我删除它或将其更改为内联，文本将不会一直到中心，或者不会是百分之百的宽度。

#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>";
?>

提前谢谢！

Answer 1

如果没有在页面上看到这一点，这可能无法解决您的具体问题，但可能是您的div上方的margin或其上方的元素。使用Chrome的“Inspect”上下文菜单选项检查元素，并查看其中的“元素”选项卡，以查看是否可以识别不需要的空间来自何处。（此类工具将显示计算和继承的样式，因此即使您未明确放置，也可以看到可能影响<div>的内容它在那里。）

如果我使用你的CSS和HTML生成一个盒子，它上面有一个彩色框，那就没有空格。我认为它一定是别的东西。

因此，我将您的代码复制到一个非常简单的页面中，然后在其上方添加了一个彩色框，如下所示：

<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>

但是这段代码在“green_announcement”块之上没有产生空格。请参阅this JSFiddle以查看其实际效果。这使我得出结论，其他东西导致你的空白问题。

Answer 2

嗨，安东尼不确定问题到底是什么，请查看链接并告诉我这是否有帮助https://jsfiddle.net/8fvjdfbu/

Area

显示内联块空白区域

2 个答案: