Michal Posted September 28, 2017 Share Posted September 28, 2017 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> Link to comment Share on other sites More sharing options...
davej Posted September 28, 2017 Share Posted September 28, 2017 Did you get rid of the default margins and padding? Also be aware that whitespace can create gaps between inline blocks. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2017 Share Posted September 28, 2017 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. Link to comment Share on other sites More sharing options...
Ingolme Posted September 29, 2017 Share Posted September 29, 2017 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; } Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now