Remove spaces from HTML

Asked Dec 23 '14 at 14:16

Active Dec 23 '14 at 14:19

Viewed 89 times

I have a little issue with HTML parser and spaces.

<div class="a">
   <div class="b">Foo</div>
   <div class="b">Bar</div>
</div>

.a { width: 500px; }
.b { width: 50%; display:inline-block; }

I want to display 2 div element in the same line, like this : http://jsfiddle.net/m4xkpLsv/

When I have space between the two div elements, my browser inserts a little blank space between them.

The most used solutions are to use HTML comment, delete spaces or set a width of 49%. I don't like theses solutions.

How can I modify my CSS to display theses elements ?

asked Dec 23 '14 at 14:16

pierallard

did you try making the borders and margins to 0? – stackErr Dec 23 '14 at 14:17
Why don't you google ? CSS elemnts side by side ... Many options like float, flexbox, table-cell. – DaniP Dec 23 '14 at 14:18
reset ur elements *{margin:0;padding:0} – Suraj Rawat Dec 23 '14 at 14:19
just add *{ padding:0; margin:0;} http://jsfiddle.net/nwnmq0wr/ – Sajad Karuthedath Dec 23 '14 at 14:22
@stackErr Doesn't change anything. – pierallard Dec 23 '14 at 14:22
@Danko Can't use float in this context, but I don't know 'flexbox'. I'm gonna see this. – pierallard Dec 23 '14 at 14:22
Read: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – Mohamad Shiralizadeh Dec 23 '14 at 14:24
Yes I think it's the white space maybe. Could it be that? – Tai Kwangi Chicken Dec 23 '14 at 14:25
http://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side – llanato Dec 23 '14 at 14:41

0 Answers0