How Do I Avoid Line-Break Padding?

Question

My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)

This can screw up layouts where child elements are sized to exactly fit their parents.

I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->

This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?

I also found [this related question](http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html) where various users found other workarounds. — Jose Faeti, Aug 25 '11 at 08:47

score 4 · Accepted Answer · answered Aug 25 '11 at 08:51

That isn't "a little bit of space", but literally a space character. You are using display: inline-block to align your elements horizonally, and that's how "inline" works.

If you want to use inline-block you need to remove the white space between the elements as you are doing it.

Otherwise you can use one of the other methods to horizontally align, for example floating or display: table-cell.

score 1 · Answer 2 · answered Aug 25 '11 at 06:57

1

A solution would be to use some HTML compressor before publishing your pages to remove unneeded space from your markup, like in this example.

From what I've seen though, they tend to leave always one space at least, because they don't know if you really wanted that space or not, and since browsers considers only the first space if there are more than one, compressors leave one space there.

answered Aug 25 '11 at 06:57

Jose Faeti

12,126
5
38
52

I guess I could always make my own script/program to strip all unquoted whitespace, if I really needed to. It's not a particularly difficult thing to implement. – Maxpm Aug 25 '11 at 07:19
Yes that's also what I'm planning to do as soon as I've some spare time. It's just some big text manipulation, not a big thing really. So you can customize it with your options depending on the situation. – Jose Faeti Aug 25 '11 at 07:23

score 1 · Answer 3 · answered Aug 25 '11 at 08:41

You should try font-size:0px; line-height:0px for outer div.

Something like this:

<div class="outer">
  <div class="inner">123</div>
  <div class="inner">34556</div>
</div>

<style>
.outer {
  font-size:0px;
  line-height:0px;
}

.inner {
  font-size:14px;
  line-height:16px;
  display:inline-block;
}
</style>

score 1 · Answer 4 · answered Aug 25 '11 at 08:50

1

This is because you use display: inline-block; for the div elements.

Block elements strip white space around them, inline elements don't.

Try float: left; instead.

answered Aug 25 '11 at 08:50

Aaron Digulla

321,842
108
597
820

Somehow, using floats seems even less elegant than stuffing the line breaks in comments. – Maxpm Aug 25 '11 at 09:13
It's not less elegant, it's differently dangerous. If you use comments, chances are that you're commenting too much. Floats are fragile when used in layouts and the window width changes too much. – Aaron Digulla Aug 25 '11 at 09:26

How Do I Avoid Line-Break Padding?

4 Answers4

Linked