显示内联块空白 - Display inline-block white space

Display inline-block white space

本文关键字：空白显示 | 更新日期: 2023-09-27

好吧，我遇到了这个问题，在内联块元素上方有一个空白。现在，问题来了。如果我删除它或将其更改为内联，文本要么不会一直到中心，要么宽度不会达到百分之百。

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

提前谢谢！

如果没有在页面上看到这一点，这可能无法解决您的特定问题，但它可能是div上方的margin，或位于其上方的元素上。使用Chrome的"检查"上下文菜单选项检查元素，并查看那里的"元素"选项卡，看看您是否可以确定不需要的空间来自哪里。（像这样的工具将向您显示计算的和继承的

如果我使用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"块上方不产生空格。看看这个JSFiddle，看看它在行动。这让我得出结论，是其他原因导致了您的空白问题。

嗨，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;
    }