Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I eliminate spacing between inline elements in CSS? [duplicate]

I have a div with a bunch of image tags inside, here is an example:

<div style="margin: 0; padding: 0; border: 0;">     <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>     <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>     <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a> </div> 

Because there is whitespace between the tags, browsers will display some whitespace between the images (Chrome decides on 4px). How can I tell the browser to show NO whitespace whatsoever between the images, without placing the > and < directly next to each other? I know letter-spacing applies in addition to what the browser decides to use, so that's useless even with a negative value. Basically I'm going for something like Twitter has at the bottom of their home page. I looked at their code and they're using an unordered list. I could just do that but I'd like the technical explanation for why there appears to be no way to eliminate the white space from between these images.

like image 847
Jake Petroules Avatar asked Jun 02 '11 10:06

Jake Petroules


People also ask

How do I reduce the space between lines in CSS?

Use the line-height property in CSS to do so. Browsers by default will create a certain amount of space between lines to ensure that the text is easily readable. For example, for 12-point type, a browser will place about 1 point of vertical space between lines.

How do you remove extra space in CSS?

apply float:left and that will remove the space so the text doesn't have to be on 1 line.

How do I keep elements on the same line in CSS?

You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.


1 Answers

If you for some reason want to do it:

  • without using floats, and;
  • without collapsing the whitespace in your HTML (which is the easiest solution, and for what it's worth, what Twitter is doing)

You can use the solution from here:

How to remove the space between inline-block elements?

I've refined it slightly since then.

See: http://jsfiddle.net/JVd7G/

letter-spacing: -1px is to fix Safari.

div {     font-size: 0;     letter-spacing: -1px }  <div style="margin: 0; padding: 0; border: 0;">     <a href="/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>     <a href="/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>     <a href="/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a> </div> 
like image 174
thirtydot Avatar answered Sep 28 '22 19:09

thirtydot