I have a div with 2 images side by side. Theres a space seperating the tags. Thus a space between the two images. Is there a way i can use css to hide the space (or text) inside of that div?
A:
Just remove the space between the tags in the html...
An image is an inline element, which means it takes into account any text surrounding it. That includes spaces. Making them display:block elements would solve it if you specified their widths.
You could make them display:table, but that is a nasty hack that should be avoided. I don't even think they would be side by side then, but i could be wrong.
Tor Valamo
2010-03-20 12:52:18
+1
A:
You can style the <img> with display: block; float: left;. This should remove the space, since images are inline elements by default.
<img src="image1.png" style="display: block; float: left;">
<img src="image2.png" style="display: block; float: left;">
Daniel Vassallo
2010-03-20 12:53:26
floating them would make the containing div collapse...
Tor Valamo
2010-03-20 13:04:58
There are solutions for that: http://stackoverflow.com/questions/2021283/css-container-doesnt-stretch-to-accomodate-floats
Daniel Vassallo
2010-03-20 13:06:47
Thanks for reminding me about that way, just working on something and i forgot it could be that easy. I was doing the clear:both; div solution, which isn't pretty.
Tor Valamo
2010-03-20 15:03:48
A:
Or you can put it in a <span/> and hide that whenever you hide the div. Or put the image in a div with padding. Or put margin on the image instead of a space. Lots of ways to do this.
Robusto
2010-03-20 12:54:29