Deleting html spaces, using css

Question

This is css code:

#div_0, #div_1 {
    width: 100px;
    height: 100px;
    display: inline-block;
}

#div_0 {
    background-color: #090;
}

#div_1 {
    background-color: #900;
}

and this is HTMl

<div id="div_0"></div>
<div id="div_1"></div>

this displayd so: http://jsfiddle.net/7G63S/

As you see, here is spice between div tags, for delete this space I can write html so:

 <div id="div_0"></div><div id="div_1"></div>

and problem resolved: http://jsfiddle.net/7yE2M/

But intereset, how can delete space between divs with css, if html look like so:

<div id="div_0"></div>
<div id="div_1"></div>

?

or make this impossible ?

P.S. white-space: nowrap not helps in this case.

You can't delete, using CSS – you could only hide… – feeela Sep 12 '12 at 12:47 — feeela, Sep 12 '12 at 12:47

score 5 · Answer 1 · answered Sep 12 '12 at 12:47

5

Set line-height and font-size to 0 on the wrapping container - see http://jsfiddle.net/7G63S/1/

answered Sep 12 '12 at 12:47

Sean Vieira

140,251
31
286
277

yeahh thats the right approach for this instead of @sowmya answer – supersaiyan Sep 12 '12 at 13:03
1

Note that this isn't very SEO-friendly. Web crawlers might consider this abuse since you are explicitly hiding text; of course this CSS rule will be probably overridden by rules in children, but I still think this isn't a great idea. – Chris Sep 12 '12 at 13:07
1

@Abody97 - I would hope that web crawlers would not the amount non-whitespace text being hidden by this technique (in this case, none) and not penalize a website that uses this technique. – Sean Vieira Sep 12 '12 at 13:25
@SeanVieira Yeah, because I can't think of a cleaner solution. – Chris Sep 12 '12 at 13:30
If you're working with ems, this solution has horrible side effects... like not being able to reset the font-size of the child elements using ems. – cimmanon Sep 12 '12 at 13:34
@cimmanon - you can target the child containers and reset *their* `font-size` - e. g. `.my-container div { font-size: 16px; }` and then use `em`s to your heart's content. – Sean Vieira Sep 12 '12 at 15:38
@Sean Vieira except for the part where you aren't using ems anymore, as in all font-sizes are measured in ems. Resetting it to a px value is not the same thing. – cimmanon Sep 12 '12 at 16:31
@cimmanon - you are just resetting the container to your base `font-size` - the same size you are setting presumably on the `body` tag - and if you are using a CSS pre-processor like LESS or SASS or if you set all of your reset points `font-size` in the same place (i.e. `body, .my-container div { font-size: 16px; }` you can use `em`s everywhere else you want to and get proper re-sizing behaviors without issue. – Sean Vieira Sep 12 '12 at 16:56

score 0 · Answer 2 · edited Sep 12 '12 at 14:13

0

Add the float:left style to the divs #div_0, #div_

Demo here http://jsfiddle.net/7yE2M/1/

edited Sep 12 '12 at 14:13

bfavaretto

69,385
15
102
145

answered Sep 12 '12 at 12:46

Sowmya

25,313
20
91
128

2

That doesn't solve the problem but is a completely different approach to position elements in the layout… – feeela Sep 12 '12 at 12:50
@krish Only that `float: left;` isn't inline-block. – Chris Sep 12 '12 at 12:50
yeahh thats the wrong approch. @sean vieira done in a right way – supersaiyan Sep 12 '12 at 13:04

cimmanon · Answer 3 · 2012-09-12T14:45:06.700

Are you wanting the whitespace for source formatting reasons or is this a case of being unable to modify some generated HTML? If you can modify the html, your best bet is to simply eliminate the whitespace, but that doesn't have to mean you need to lose your formatting. Just comment out the whitespace:

<div id="div_0"></div><!--
--><div id="div_1"></div>

Edit: more solutions can be found here http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Deleting html spaces, using css

3 Answers3