Jump to content
Michal

White gap between images

Recommended Posts

Hello Guys,

Any one able to explain why there is this magic white gap between the images?

I've spent whole day on trying to get rid of this...maybe some one can help?

 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<img src="main.jpg">
<img src="main.jpg">

</body>
</html>

 

2017-09-28_15h42_22.png.b167818e4f18b035f0225468c720656b.png

 

 

Share this post


Link to post
Share on other sites

Did you get rid of the default margins and padding? Also be aware that whitespace can create gaps between inline blocks.

Share this post


Link to post
Share on other sites

Where is the outside border coming from? IF it is a container of some sort, for example a div element, and no text is going to be inside along with images apply font-size:0; to this container element OR instead add float: left; to images.

Share this post


Link to post
Share on other sites

Images are inline elements, so they are aligned with the baseline of the text. There is space below the text baseline to accommodate hanging letters such as g or y. To solve this, you can use the vertical-align CSS property on the images to align them with the middle of the text instead of the baseline.

This would go in your CSS stylesheet

img {
  vertical-align: middle;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×