CODEWITHSUNDEEP
csshtml
PrimRock
PrimRock

Reputation: 1156

How to get rid of white-space at the bottom of div element when text is entered

I have a blank HTML page and I want to align 2 elements...Vertically and Horizontally. These elements are a <img> tag, a <p> tag for text, and 2 <div> tags for containing those elements...

When I resize my window I don't want these elements to be cut-off by my browser. After countless hours of trying to figure this out, and searching Stack and various other websites...I came close, but I could never get it 100% like I want it...

There's this white-space at the bottom and the ride side of the bordered second div near the text, and the culprit appears to be the <p>. When I get rid of the tag the white-space goes away. However, I want the text under the image so I need it...

content alignment problem content alignment problem 2

The white-space is making me question whether the content is placed in the center or not. How can I get rid of it?

HTML

<body>
  <div id="container">
    <div id="content">
      <p>
        <a href="index.html"><img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction"></a>
        <br> UNDER CONSTRUCTION!
      </p>
    </div>
  </div>
</body>

CSS

body
{
    margin:0;
    background-color: seagreen;
} 

#container
{
    position:relative;
    height:100%;
    width:100%;
    min-width:400px;
} 


#content 
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    outline:3px solid red;

}

#content p 
{
    margin:0;
    text-align:center;
    font-family:Courier;
    font-size:48px;
    white-space:nowrap;
    color:springgreen;
}

Upvotes: 1

Views: 8283

Answers (3)

Frank Fajardo
Frank Fajardo

Reputation: 7359

I changed you HTML to enclose your text in a span tag and removed the br:

<body>
  <div id="container">
    <div id="content">
      <p>
        <a href="index.html"><img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction"></a>
        <span>UNDER CONSTRUCTION!</span>
      </p>
    </div>
  </div>
</body>

Then I added this to your CSS. It styles the enclosing span as a block, so you don't need to <br> tag in your HTML. It also uses line-height to adjust spacing above and below the line of text.

#content span {
   display: block;
   margin: 0;
   line-height: .8;
}

And removed the position attribute from here:

#container
{
    /*position:relative;*/ /* Removed */
   height:100%;
   width:100%;
   min-width:400px;
}

Here is a sample fiddle

UPDATE

It appears the reason why you are seeing white-space still on Firefox is that you are using outline instead of border on your CSS for #content.

I don't know exactly why Firefox is rendering the outline differently. But if you change your CSS for #content to the following, you'll get the same result on Chrome, Firefox, Edge and IE (11).:

#content 
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    /*outline:3px solid red;*/
    border: 3px solid red;
}

Here is the updated fiddle

Upvotes: 2

John Smith
John Smith

Reputation: 495

I GAVE IT ANOTHER TRY, HOPEFULLY THIS WILL SOLVE IT FOR YOU. YOU SOUND VERY DESPERATE. 

*{
  border: 0; 
  margin: 0; 
  margin: 0; 
}
.container {
    font-size: 0;
}
.container span {
    font-size: 35px;
    background: #ff8ea1;
    padding: 0;
    margin: 0; 
}

.container span.no-space {
    display: inline-block;
    vertical-align: top;
    height: .75em;
    line-height: .75em;
}
<div class="container">
    <span>Under Construction</span>
    <div style="height: 20px;"></div>
    <span class="no-space">Under Construction</span>
</div>

TRY THIS ONE!

Upvotes: -1

swati
swati

Reputation: 11

I have gone through your code . i have made some changes in above given code . I hope this gone be helpful to you. CSS

body
{
    margin:0;
    background-color: seagreen;
} 
img{
display: block;
    margin: auto;
    width: 50%;
}
/* add this css to remove the white space under text */
p
{
margin-bottom: -9px !important;
}
#container
{
    position:relative;
    height:100%;
    width:100%;
    min-width:400px;
	
} 


#content 
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    outline:3px solid red;
	    margin-top: 200px;
    padding-top: 10px;
}

#content p 
{
    margin:0;
    text-align:center;
    font-family:Courier;
    font-size:48px;
    white-space:nowrap;
    color:springgreen;
}
 <div id="container">
    <div id="content">

        <a href="index.html"><img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction"></a>
        <br> 
		<p>UNDER CONSTRUCTION!</p>
    </div>
  </div>

Upvotes: 1

Related Questions