Add spacing between two spans

Question

For the code below I want add spacing between "Discount" and $500. I don't want to add additional break tag. Here's the sample on jsbin.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Spacing Test</title>
<style type="text/css">
        .labelReadOnlyTB {
            font-size: 16px;
            font-family: Arial;
            padding: 1px;
        }
        .labelForTextbox
        {
        font-weight: bold;
        font-size: 12px;
        color: #000000;
        font-family: Arial;
        padding:8px 0px;
        margin-bottom:5px;
        }
    </style>
</head>
<body>
  <table>
      <tr>
         <td style="min-height:45px;vertical-align:top;">
        <span id="lblDiscount" class="labelForTextbox">Discount</span>
         <br />
        <span id="lblValue" class="labelReadOnlyTB">$500</span>
        </td>
      </tr>
  </table>

</body>
</html>

score 30 · Answer 1 · edited Apr 13 '20 at 13:56

30

If you want to add spacing in html you can also use.

&nbsp;

If you put three of these before your text, it will add 3 white spaces.

for example:

<label>&nbsp;<span>Test</span></label>

edited Apr 13 '20 at 13:56

j3ff

5,719
8
38
51

answered Aug 20 '18 at 01:35

tim

677
9
11

I rarely use to layout because it takes space according to font-size, which makes it harder for layout. – Eric Jul 19 '21 at 10:49

kunalbhat · Accepted Answer · 2018-08-20T01:17:07.233

17

If I understand you correclty you want the spans to be on separate lines, but not have to use the   tag.

 is by default an inline element. Give it a property of display: block;

UPDATED with relevant code based on comment:

.labelForTextbox {
  ...
  display: block;
  margin-bottom: 10px; /** Change this value to whatever you wish **/
}

edited Aug 20 '18 at 01:17

answered Aug 27 '13 at 20:33

kunalbhat

1,709
10
11

Add padding to one or both to space them apart even more. – Lee Meador Aug 27 '13 at 20:34
I want them on separate line and so I have on
. Now I want to increase some spacing but don't want to add another
. – gbs Aug 27 '13 at 20:36
Sure, I added margin-bottom in this case. That value can be whatever you want depending on your needs. – kunalbhat Aug 27 '13 at 20:38
1

By default span is inline, not inline-block – Christophe Jul 28 '16 at 17:07

Hashem Qolami · Answer 3 · 2014-02-24T11:38:42.403

Unlike <div> or  (which are block-level elements),  is an inline element.

According to Spec:

margin-top, margin-bottom properties have no effect on non-replaced inline elements.

In order to use top/bottom margin properties, you need to change the element's display type to block or inline-block (or whatever else margin is applicable to).

span {
    display: inline-block; /* change the display type           */
    margin: 10px 0;        /* apply the needed vertical margins */
}

Here is the JSBin Demo

Or, Simply set line-height property on the table-cell instead:

td { /* change the selector to select your specific td */
    line-height: 1.5; /* <-- set a line-height */
}

score 6 · Answer 4 · edited Apr 19 '17 at 12:12

6

For the second span, you can use pading-left:somevalue

Example : ....

edited Apr 19 '17 at 12:12

Simon H

2,495
4
30
38

answered Apr 19 '17 at 09:19

Malatesh Patil

4,505
1
14
14

score 2 · Answer 5 · answered Aug 27 '13 at 20:39

Since I see that there is a newline that puts "Discount" and "$500" on different lines I assume it will print on separate lines, and to get a little more room but not an entire new line you can use line-height.

In your css:

span#lblDiscount {
  line-height:180%
}

Try about 120-200% of normal line height and it will put a nice amount of spacing between your two lines. Hope this helps.

score 1 · Answer 6 · answered Jun 21 '21 at 14:31

1

Another solution:

span::after {
  content: ' ';
}

This adds a space behind any span (or whatever you want). You could also combine it with :last-child or css sibling + selector to only add this for elements between.

answered Jun 21 '21 at 14:31

Domske

4,795
2
20
35

1

specificly content of space didn't work (```' '``` doesn't show, adding any char in side the ' ' did work) – Shani Kehati Jul 25 '21 at 12:25
1

(there's a solution for that here: https://stackoverflow.com/a/40963855/12056841) – Shani Kehati Jul 25 '21 at 12:27

score 1 · Answer 7 · answered Dec 30 '22 at 15:23

By default  is an inline element. To change this we apply the display: block css property. This will give the effect of a   tag without manually adding it and cluttering up our html.

span {
  display: block;
}

If you wish to add spacing and not a new line you can add the   html entity in between your 2 spans

<span>Hello,</span>
&nbsp;
<span>World!</span>

Add spacing between two spans

7 Answers7