Chrome bug? CSS3 columns make an extra space on every new column

Question

This is my code:

If you open it with Chrome, you will see that every new column (not the first one) has an extra space over only the content of the first huge letter of each column.

Meanwhile, Firefox seems to be doing this right.

Is this a chrome bug? or am I missing something?

possible duplicate of [CSS multi-column layout of list items doesn't align properly in Chrome](http://stackoverflow.com/questions/5314726/css-multi-column-layout-of-list-items-doesnt-align-properly-in-chrome) — Kyle, Mar 30 '12 at 16:19

score 4 · Accepted Answer · answered Apr 04 '12 at 14:31

4

http://jsfiddle.net/WCP5f/3/

I switched the .huge-letter font-size to an EM instead of a PX value, and this seems to have fixed it.

answered Apr 04 '12 at 14:31

Bart

6,694
6
43
53

Try removing the `line-height`. – Bart Apr 04 '12 at 14:42
Or, you can make the `line-height` an EM as well, and that fixes it. – Bart Apr 04 '12 at 14:45
Yes! I see. Adjusting the line-height, I can make it match. Thanks! – Enrique Moreno Tent Apr 04 '12 at 14:57

Chrome bug? CSS3 columns make an extra space on every new column

1 Answers1