Invisible boxes' margin

Question

I have done something like this :

and there is that margin on the right of every box. i cant' get rid of it , unless I give it display: table-cell , but then I can't apply any of margins at all. What I want to add next is

div.box:nth-child(n+2) {
  margin-left: 30px;
}

score 0 · Accepted Answer · answered Mar 29 '15 at 13:12

0

display:inline-block always leave space between elements (like in any text there's space between letters). There's many hacks to avoid that but all of them has flaws. you should use float insteed.

answered Mar 29 '15 at 13:12

Alvaro Menéndez

8,766
3
37
57

"you should use float"...which requires it's own hacks. Each has it's own issues...one is not better than the other...it's situation-dependent as to which is right for the user. – Paulie_D Mar 29 '15 at 13:14
Well. I may have say "in my opinion, you should..." my bad. But for a basic structure where you need blocks with no space between I will never get why inline-block is needed over float (or flex) – Alvaro Menéndez Mar 29 '15 at 13:16
Because I can center inline blocks...which is pretty hard with floats. – Paulie_D Mar 29 '15 at 13:20
yep. you right on that. If need of centering I use flexboxes but I undestand removing inline-block margins may be a easier and faster solution. – Alvaro Menéndez Mar 29 '15 at 13:25

score 0 · Answer 2 · answered Mar 29 '15 at 13:14

0

Add font-size: 0; and line-height: 0; to the wrapper:

http://jsfiddle.net/gg83kvev/1/

answered Mar 29 '15 at 13:14

Kaloyan

7,262
4
32
47

Invisible boxes' margin

2 Answers2