CODEWITHSUNDEEP
htmlcss
Jaquacky
Jaquacky

Reputation: 561

CSS adding random whitespace to images?

I want to display images so that they appear horizontally on the same line and are both 50px from the centre of the page. When I try to do this they appear on different lines and if you look closely there is random white space added onto the right of the google image and left of the intel image. I asked a similar question here: How to position elements based off the center of a page?

My solution:

#image{
   padding:100px;
   background:white;
   text-align: center;
}

#google{
    display:inline-block;
    margin-right:100px;
}
#intel{
    display:inline-block;
    margin-left:100px;
}

Here is the jsfiddle: https://jsfiddle.net/gc3b85cv/3/

How do I get rid of the white space and put them both on the same line horizontally while also making sure they're both 50px from the centre of the page (left and right for the respective images).

IMAGE1<---50px--> |  <---50px--> IMAGE2

               (centre)

Upvotes: 0

Views: 65

Answers (2)

Terry
Terry

Reputation: 66103

Vertical alignment

I assume that you want to vertically centre your element as well—although this was not clear in your question (you mentioned "same line" but it could also mean same baseline).

The fix is simple: use vertical-align: middle on your inline-block level images:

#image img {
    vertical-align: middle;
}

White space issue

That is because you are using display: inline-block, therefore each node will be treated like inline elements in a way that any whitespace between them will be interpreted as a space character (just like in text, but unlike block level elements).

To resolve this issue, you can use the font-size: 0 hack on the parent element—however, the main disadvantage is that if you are using relative font sizes in the children elements, like em or %, they will compute to 0.

#image {
   font-size: 0;
   padding:100px;
   background:white;
   text-align: center;
}

See demo fiddle here: https://jsfiddle.net/teddyrised/gc3b85cv/10/

Alternatively, you can simply remove all whitespace between elements, although this makes your markup harder to eyeball:

<div id="image"><a href="http://www.google.ca"><img id="google" src="http://placehold.it/250x228" alt="google" style="width:250px;height:228px;" /></a><a href="http://www.intel.ca/content/www/ca/en/homepage.html"><img id="intel" src="http://placehold.it/250x100" alt="Intel Logo" style="width:250px;height:100px;" /></a></div>

...or if you really want to preserve the indentation, use <!-- --> to comment out whitespace between elements:

<div id="image"><!--
    --><a href="http://www.google.ca"><img id="google" src="http://placehold.it/250x228" alt="google" style="width:250px;height:228px;" /></a><!--
    --><a href="http://www.intel.ca/content/www/ca/en/homepage.html"><img id="intel" src="http://placehold.it/250x100" alt="Intel Logo" style="width:250px;height:100px;" /></a><!--
--></div>

Upvotes: 3

dark_vontell
dark_vontell

Reputation: 1

In your html remove the newlines and whitespace between the two image objects. Whitespace is an html character and will be displayed on the page.

Upvotes: 0

Related Questions