Multiple Span Tags Under a Div Add Extra Spaces

span {  display: inline-block;  border: 2px solid red;  margin: 4px;}

<div style="width: 200px;">  <span> text 1 </span>  <span> text 2 </span>  <span> text 888888 888888 888 888  8  8888 8 8 888 888 8888 888  88888  8888 888 8888 8888 8888 </span>   <span>text 4</span>  <span> text5 </span>  <span> text 6 </span>  <span> text 7 </span>  <span> text 9 </span>  <span> text 10 </span>  <span>text 11</span>  <span> text 12 </span>  <span> text 18 </span>  <span> text 14 </span>  <span> text15 </span>  <span> text 16 </span>  <span> text 17 </span></div>

Spaces In between the span and /span tags is not displaying

From the HTML4 specification about white space characters (emphasis mine):

Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.

So the specification dictates that multiple consecutive spaces should be collapsed into one.

There are a couple of options for "preserving" consecutive spaces:

• Use CSS to change the way how the browser renders the spaces (demo):

  span {
      white-space: pre-wrap;
  }
  

• You could encode the spaces as   or   (depending on the width of the space you want to insert) (demo) *.

• You could use the <pre> element (demo):

  <pre><span>"|      Testing"</span></pre>
  

  Since browsers use a different font for the content of pre elements, you'd also have to use CSS to reset the font to the font used in the rest of your page, e.g.

  pre {
      font-family: serif;
  }
  

*: You could also use the   HTML entity, however, this change will another behavior of the browser: When the content is too long to fit in the available width of the element, the browser will automatically break the content on spaces. nbsp stands for *no-break_space*, so while the browser will render spaces, it won't break overflowing content on them (demo).

Add spacing between two spans

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

<span> 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 **/
}

How to remove the space between two span tags?

I usually set font-size of the parent container to zero, which makes white spaces causing gaps to disappear. You then just need to set font-size back to necessary value for spans, for example:

.container {
    font-size: 0;     // whitespaces go away
}
.container span {
    font-size: 16px;  // spans text please stay
    background: #DDD;
    padding: 2px 4px;
}

Demo: http://jsfiddle.net/we9bvrpe/

How to wrap many span within div

EDIT (2017): Flexbox with wrap display: flex; flex-wrap: wrap is compatible with IE10+ (and Android 4.4+) and will allow versatile alignments both horizontally (justified, aligned to the left or right, space-around, centered) and vertically (align-items) with also versatile spacing between lines (align-content… if an height is set, in general).

Bonus: no ~4px whitespace between items to take care of as with inline-block. You do pretty much what you want: no gutter, flex: 1 1 auto or padding: 1rem for example

Cheatsheet for Flexbox on CSS Tricks

/EDIT

Span doesn't seem very semantic, maybe use an unordered list?

If I understood well your problem, you want as many span per line that'll fit but no span begininng on a line and finishing in another line?

Then the following fiddle: http://jsfiddle.net/MRR6P/ will do the trick. Try

span {
  line-height: 1.8;
  word-wrap: normal;
  display: inline-block;
}

How to apply space in span element

margin is applied to block or inline-block elements

but not inline element like

span tags

try this

<span style='color:red;margin-right:1.25em; display:inline-block;'> </span>

how to remove the white space between two span tags?

Update Css

.left-top-text {
    display: inline-block;
    padding-top: 6px;
    font-size: 30px;
    white-space: nowrap;
    margin-left: -5px;
}

Snippet Example

.side-bar{        background-color: red;     }    @media (min-width: 768px){        .side-bar{            z-index:10;            position:absalute;            width:220px;            /*padding-top:60px;*/            height:100%;            /*top:0;*/            position:fixed;
    }    }    @media (min-width: 768px){        .top-left-part{            width:220px;            position:fixed;            z-index: 11;            /*top: 0;*/            height: 60px;        }    }    /*---------------top left part starts here------------*/    .top-left-part{        width:220px;        float:left;        background-color: #ffffff;        /*padding-top: 60px;*/    }    .top-left-image{        float: left;        height: 40px;        width: 50px;        padding-left: 1.3px;        padding-right: 10px;        padding-top: 2.7px;    }   .left-top-text {    display: inline-block;    padding-top: 6px;    font-size: 30px;    white-space: nowrap;    margin-left: -5px;   }    .text-elite{        font-weight: 600;    }    .text-admin{        padding-left: -5px;    }    /*---------------top left part ends here-------------*/    /*---------------top-right part starts here----------*/    .top-right-part{        top: 0 !important;        background-color:#4F5467;        width:100%;        height:60px;        right: 0;    }    .arrow-left{        color: white;    }    /*---------------top right part ends here-------------*/

<html>    <head>              <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />              <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />              <link rel="stylesheet" type="text/css" href="css/style.css" />              <link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.min.css" />              <meta name="viewport" content="width=device-width, initial-scale=1.0">        <link rel="stylesheet" href="css/elite.css" type="text/css">        <script src="js/elite.js">        </script>    </head>    <body>        <div id="top-bar">            <div class="top-left-part">                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>                <span class="left-top-text text-elite">elite </span>                <span class="left-top-text text-admin">admin</span>            </div>            <div class="top-right-part">                <span class="arrow-left fa-arrow-left"> </span>            </div>        </div>        <div id="bottom-part">            <div id="left-side-bar" class="side-bar">
            </div>            <div id="right-side-container">            </div>        </div>    </body></html>

  $('.space').append("       ");