How can I avoid a small space between my and elements?

Question

I have the following:

<input style="width: 20px" data-ng-model="row.number" type="text" />
<span style="width: 20px">-</span>

How can I avoid the small space between the <input> and <span>, and how can I center the "-" in the span.

I need a solution other than to put all on one line as my IDE reformats to multiple lines.

Be aware that `span` are inline elements by default, so they ignore `width` property. You can change that using, for example, `display:inline-block` — Oriol, Nov 03 '13 at 05:28
centering in span is not meaningful. why don't you use div tag to center the - symbol. — newday, Nov 03 '13 at 07:30

Josh Crozier · Answer 1 · 2013-11-03T03:47:34.970

3

By default, a span is an inline level element, which respects the whitespace in the markup.

There are multiple ways to remove this, one is simply removing the space within the markup:

<input style="width: 20px" data-ng-model="row.number" type="text" /><span style="width: 20px">-</span>

jsFiddle example

Another way is setting the parent element to font-size:0px

jsFiddle example

Another is setting negative margins in order to displace the whitespace. span { margin: -4px; }

jsFiddle example

edited Nov 03 '13 at 03:47

answered Nov 03 '13 at 03:42

Josh Crozier

233,099
56
391
304

I'm sorry but doing this and my line would be a couple of hundred characters long. – Nov 03 '13 at 03:43
If I set the font-size to zero then what about the size of my characters? – Nov 03 '13 at 03:46
@Melina See the example, it is somewhat of a hack. You set the parent to `font-size:0px`, then set the child to whatever you want. In the example above I reset it to `font-size:16px` which is the default. – Josh Crozier Nov 03 '13 at 03:46
1

Small note: use `font-size:0` instead of `font-size:0px`. Otherwise, I agree - excellent suggestions. – Nightfirecat Nov 03 '13 at 05:09
2

The first solution is good. `margin: 4px` is not quite recommended because it differs on every browser. and also giving `font-size: 0px` is not recommended because we need to apply the font size again to the child elements which in many cases we don't know the default font-size(_good if we are using less_). – Mr_Green Nov 03 '13 at 05:16
1

@Mr_Green Agreed - removing the whitespace in the markup is the best, and most optimal solution. The rest are cheap hacks. – Josh Crozier Nov 03 '13 at 15:15

Oriol · Answer 2 · 2013-11-03T05:22:22.763

You can use

HTML comments between elements:

<div><!--
    --><input style="width: 20px" data-ng-model="row.number" type="text" /><!--
    --><span style="width: 20px">-</span><!--
--></div>

Closing > to the next line:

<div
    ><input style="width: 20px" data-ng-model="row.number" type="text"
    /><span style="width: 20px">-</span
></div>

font-size:0 on parent (reset it on children if necessary)
float:left (remember to clear it adding an element with clear:both after floating elements)
In a far future, we will be able to use text-space-collapse: trim-inner. Be aware that it isn't currently supported, and the spec is a draft not ready for implementation.

score 1 · Answer 3 · answered Nov 03 '13 at 03:48

Consider using the join and break technique:

<input style='width:20px;' data-ng-model='row.number' type='text' /><span
style='width:20px;'>-</span>

Notice the line breaks after the tag opens. This is a technique to balance having long lines versus spurious whitespace.

score 0 · Answer 4 · answered Nov 03 '13 at 03:41

0

put the input and the span on the same line in your html

answered Nov 03 '13 at 03:41

otherDewi

1,098
10
24

Well I am not sure that's possible. I have a lot of elements and I just showed two. The line would be very long. – Nov 03 '13 at 03:42
Who cares how long the line is in the source? – cimmanon Nov 03 '13 at 04:32
put the line breaks elsewhere in your html see the answer by bishop. – otherDewi Nov 03 '13 at 18:26

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

You should give same css properties to both the input element and the span element.

input,span{
    float: left; /* helpful to remove the gap */
    line-height: 15px;  /* centering by giving the value of height */
    height: 15px;    /* same height to both the elements */
}
span{
    border: 1px solid transparent;
    border-left-width: 0px; /* removing left border to decrease the gap */
}

In the above stylings, I am giving border to the span element because the input has border by default.

Working Fiddle

or else

You can also use display: table-cell and do something like this:

input, span {
    display: table-cell;
    vertical-align: middle;
}
input {
    outline: none;
    padding: 0px;
    margin: 0px;
}
body { /* or parent element */
    display: table;
}

Working Fiddle

How can I avoid a small space between my and elements?

5 Answers5

or else