sepoto Posted May 6, 2011 Share Posted May 6, 2011 I am working with an image called masthead.jpg that is exactly 1000px wide. I notice that in the code below there is a small white space between the first image and second image that appears in Internet Explorer. I notice if I put a <br> directly after the first image the small white space gap actually disappears! How counter intuitive! <html><head> <style> body { text-align: center; min-width: 1000px; } #wrapper { text-align: left; width: 1000px; margin-left: auto; margin-right: auto; overflow: hidden; } </style></head><body><div id="wrapper"> <img src="img/masthead.jpg"></img> <img src="img/masthead.jpg"></img></div></body></html> If I do this the gap actually goes away! Hahahahahaha! Why is this happening? <html><head> <style> body { text-align: center; min-width: 1000px; } #wrapper { text-align: left; width: 1000px; margin-left: auto; margin-right: auto; overflow: hidden; } </style></head><body><div id="wrapper"> <img src="img/masthead.jpg"></img><br> <img src="img/masthead.jpg"></img></div></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted May 6, 2011 Share Posted May 6, 2011 That's because images are inline elements. Inline elements always leave a small space for "hanging letters" like j, g, and y. (EDIT: I'm not sure why adding a <br> tag fixes it though )Try floating your images. (ie, float: left; or float: right;) Link to comment Share on other sites More sharing options...
jeffman Posted May 6, 2011 Share Posted May 6, 2011 Alternatively, since you're using the elements like blocks, change the display rule to block. Link to comment Share on other sites More sharing options...
sepoto Posted May 6, 2011 Author Share Posted May 6, 2011 Changing the display property of the image to block does exactly what I want. The thing is is that I looked up the display property block and the manual defines a block element as having a space before and after the element. So where is the space after the element? Is the manual in error? <html><head> <style> body { text-align: center; min-width: 1000px; } #wrapper { text-align: left; width: 1000px; margin-left: auto; margin-right: auto; overflow: hidden; } </style></head><body><div id="wrapper"> <img src="img/masthead.jpg" style='display: block;'></img> <div style='height: 600px; background: blue; border: solid 1px black;'> </div></div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted May 6, 2011 Share Posted May 6, 2011 What the heck manual says that? Can you give us a link, or enough of a quote so we can see it in context? No one would DEFINE a block in terms of spaces. That's just weird. Link to comment Share on other sites More sharing options...
sepoto Posted May 6, 2011 Author Share Posted May 6, 2011 What the heck manual says that? Can you give us a link, or enough of a quote so we can see it in context? No one would DEFINE a block in terms of spaces. That's just weird."The element will generate a block box (a line break before and after the element)"http://www.w3schools.com/css/pr_class_display.asp Link to comment Share on other sites More sharing options...
jeffman Posted May 7, 2011 Share Posted May 7, 2011 I see the issue now. What they're trying to say is that a block element will occupy the horizontal space immediately below the element that comes before it. If it helps you to picture the concept as being rendered with breaks or spaces, ok. Just be aware that no actual space is rendered between the elements, which would happen if an actual <br> element were used. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.