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
  • 204,283
  • 31
  • 260
  • 272
francisMi
  • 925
  • 3
  • 15
  • 31

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
  • 172,118
  • 50
  • 264
  • 308
  • 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