Remove space added by line break in HTML code (with CSS?)

Question

I have some html that looks like this:

<span>
  398
  <span>comments posted in</span>
</span>

A space is rendered after 398 because there is a line-break in the html. For reasons I won't go into, this line-break cannot be removed. Is there a way to stop a space being rendered there?

http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — cimmanon, Nov 19 '12 at 17:25

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

No. It is not possible using CSS. Although you can use float, but it doesn't work out here.

But I have a crappy idea, give this CSS (Ideal Case):

span span {margin-left: -1em;}
span span {margin-left: -1ex;}

But the practical case was like this:

span span {margin-left: -0.4em;}
span span {margin-left: -0.7ex;}

1em or 1ex is the width of a space character in CSS. Hope it works! Everyone knows about em. So something about ex:

The ‘ex’ unit is defined by the font’s ‘x-height’. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that don’t contain an "x".

Demo: http://jsfiddle.net/UmdfA/

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 19 '12 at 17:14

Praveen Kumar Purushothaman

164,888
24
203
252

2

I was afraid you'd say that. Thanks all the same. – Nick Brunt Nov 19 '12 at 17:15
Well, @NickBrunt Still I don't get you what you said. So, you knew this before, but needed something better, or you needed this? – Praveen Kumar Purushothaman Nov 19 '12 at 17:16
@NickBrunt I used a `0.4em` in my fiddle. You need to tweak it according to the font and size you use. `:)` – Praveen Kumar Purushothaman Nov 19 '12 at 17:18
I had an inkling that it wasn't possible, but I wanted to make sure. – Nick Brunt Nov 19 '12 at 17:18
Yes, it does work, but it doesn't actually remove the space character, which would have been ideal. Thanks anyway though :) – Nick Brunt Nov 19 '12 at 17:20
1

I recommend using `ex` units as `1em` will be more than a space in most typefaces. The `ex` unit is the height of an `x`, which is more likely to match the width of a space. – Fenton Nov 19 '12 at 17:21
I disagree with @SteveFenton. Opening [his fiddle that uses ex](http://jsfiddle.net/pcsU7/) in Firefox 16, I see the number and letters overlapping. – ANeves Nov 19 '12 at 17:34
1

@ANeves Anyway, it needs to be calibrated. I have given **practical** vs **ideal** CSS. – Praveen Kumar Purushothaman Nov 19 '12 at 17:35

score 3 · Answer 2 · answered Nov 19 '12 at 17:17

3

I think we are all agreed that the correct solution where possible is this:

<span>
  398<span>comments posted in</span>
</span>

But you could use some CSS shenanigans to sort this out...

span span {
    margin-left: -1ex;
}

Or

span span {
    position: relative;
    left: -1ex;
}

answered Nov 19 '12 at 17:17

Fenton

241,084
71
387
401

Yes, clearly putting it on the same line is ideal, I don't like having to hack it but margins seem like the only solution in my situation. – Nick Brunt Nov 19 '12 at 17:19
-1: [`ex` is for height](http://stackoverflow.com/questions/918612/what-is-the-value-of-the-css-ex-unit), using it for width is a bad idea. The number and the text overlap for me, in that Fiddle. (Firefox 16.) – ANeves Nov 19 '12 at 17:24
Ugh, the spec goes on about [`em squares`](http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size), which indicates that em can be for width as well as for height... which I guess means ex can be for both too. Also, *"[according to Mozilla](http://kb.mozillazine.org/Em_vs._ex) Gecko can scale items using exes a bit more accurately than those using ems"* ([via](http://stackoverflow.com/questions/918612/what-is-the-value-of-the-css-ex-unit#comment9316381_918623)) I want to undo the -1 :( – ANeves Nov 19 '12 at 17:42
Ha! Don't worry about it :). The unit of ex is based on the height of an x but can be used to define a width. 1ex means "make this as wide as an x is high". – Fenton Nov 19 '12 at 18:36

Remove space added by line break in HTML code (with CSS?)

2 Answers2

Demo: http://jsfiddle.net/UmdfA/