Jump to content

CSS Layout.


sepoto
 Share

Recommended Posts

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

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;)

Edited by ShadowMage
Link to comment
Share on other sites

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>

Edited by sepoto
Link to comment
Share on other sites

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

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

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
 Share

×
×
  • Create New...