html - CSS adding random whitespace to images? -

i want display images appear horizontally on same line , both 50px centre of page. when try appear on different lines , if closely there random white space added onto right of google image , left of intel image. asked similar question here: how position elements based off center of 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 jsfiddle: https://jsfiddle.net/gc3b85cv/3/

how rid of white space , put them both on same line horizontally while making sure they're both 50px centre of page (left , right respective images).

image1<---50px--> |  <---50px--> image2                 (centre) 

vertical alignment

i assume want vertically centre element well—although not clear in question (you mentioned "same line" mean same baseline).

the fix simple: use vertical-align: middle on inline-block level images:

#image img {     vertical-align: middle; } 

white space issue

that because using display: inline-block, therefore each node treated inline elements in way whitespace between them interpreted space character (just in text, unlike block level elements).

to resolve issue, can use font-size: 0 hack on parent element—however, main disadvantage if using relative font sizes in children elements, em or %, compute 0.

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

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

alternatively, can remove whitespace between elements, although makes markup harder 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 want preserve indentation, use <!-- --> 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>