0

When you use line breaks and tabs, they appear as whitespace in document. Sometimes I want to keep elements on separate lines for tidiness. But I don't want a space:

<body>
  <div>1</div>
  <div>2</div><div>3</div>
</body>

(implying inline-block) renders as

1 23

Example: https://jsfiddle.net/uaz2kb74/1/

johndoe33
  • 444
  • 6
  • 25

2 Answers2

0

Either you minify your code or mark everything outside html elements as comments

<body><!--
  --><div>1</div><!--
  --><div>2</div><div>3</div><!--
--></body>

Updated JsFiddle

eltonkamami
  • 5,134
  • 1
  • 22
  • 30
  • 1
    untill they make support for `white-space-collapse: discard` in CSS you're solution is probably the nicest one on the market. – Wh1T3h4Ck5 Jul 18 '16 at 23:35
0

Anything displaying inline will count white spaces within it as an actual space.

If you wanted to work around it, in that example, you could apply font-size: 0; to the body, and then give each div an non-zero font size.

That's the easiest way, but for anything larger than that example you'd want to be a bit more specific about applying that 0 font-size.

Here's a working example, https://jsfiddle.net/uaz2kb74/3/

A comprehensive list of solutions to this inline block element space by David Walsh is here, and else where on the web and stack overflow as it's a pretty common problem!

joeyfb
  • 3,044
  • 3
  • 19
  • 25