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

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

This question already has an answer here:

Answers:

try to add img {margin:0;padding:0;float:left}

in other words remove any default margin and padding of browsers for img and float them.

Demo: http://jsfiddle.net/PZPbJ/

Questions:
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>

Questions:
Answers:

Simplest solution that doesn’t muck with layout and preserves code formatting:

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

Questions:
Answers:

The spacing causes the images to move as they are inline elements. If you want them to stack up, you could use the unordered list (as twitter does) as this will put each image inside a block element.

Inline elements are displayed inline with text.

Questions:
Answers:

You can also make all anchors to float-left and set margin-left to -1

Questions:
Answers:

If you are serving your pages with Apache then you can use the Google PageSpeed Module. This has options that you can use to collapse whitespace:

http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html

You do not have to use the more ‘dangerous’ options of PageSpeed.

Also see the answers in this question for how to remove whitespace in CSS:

Ignore whitespace in HTML

Questions:
Answers:

It looks like using a table is the correct way to go about this, as whitespaces have no effect between cells.

Questions:
Answers:

Add style="display:block" to your img tags.