1

When I place a dt and his dd element in one line:

display: inline-block;
margin: 0px;

There will still be a little margin between those two. A solution I've found is:

margin-left: -4px;

But isn't there a better way to solve it?

j08691
  • 197,815
  • 30
  • 248
  • 265
francisMi
  • 903
  • 3
  • 14
  • 30

1 Answers1

2

Yes, the space is caused because an inline-block is part of the inline flow, which means any line break will cause a space. There are several solutions:

  • Remove the newline between the two elements.
  • Set font-size: 0 on some common parent.
  • Use floats instead of inline-block

Here's a good article on the subject.

Madara's Ghost
  • 165,920
  • 50
  • 255
  • 304
  • Thanks! And is my solution (the margin-left) an acceptable solution or is it not-done? – francisMi May 07 '12 at 16:01
  • It is, I haven't listed it because you are already using it :) – Madara's Ghost May 07 '12 at 16:02
  • Margin-left:4px might not look right in all browsers, so be wary if you stick with it. If you do, make a separate css class for it. – AlexMA May 07 '12 at 16:05
  • Setting `margin-left: -4px` works in typical situations, but it’s just a guess and may go wrong. It is meant to nullify the effect of a space, but the width of a space varies (by font size *and* by font family). So removing newline is safer. – Jukka K. Korpela May 07 '12 at 16:49