Display inline-block white space
Question
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.
#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 answers
solution1
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. 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. (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.)
If I use your CSS and HTML to generate a box, with a colored box right above it, there is no whitespace. 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. See this JSFiddle to see it in action. This leads me to conclude that something else is causing your whitespace issue.
solution2
-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/
#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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.