Adding spacing between text in html

Question

I am just trying to align all the contacts in a neat straight line so that it looks in order. what is the code for it? the look on the div is what I am trying to accomplish. The image is the problem.

Edit: I prefer not to use   since I have to place it every time I want to add a space.

[HTML]

<div class="col-md-6 services-margin">
    <img class="flagsize" src="../../../img/flag_brunei.png">
    <div class="services">
        <p class="country-title">Brunei</p>
        <p>Ambulance         :991</p>
        <p>Police            :993</p>
        <p>Fire and Rescue   :995</p>
        <p>Search and Rescue :998</p>
    </div>
</div>

[CSS]

.services-margin {
    margin-bottom: 25px;
}

.country-title {
    font-weight: bold;
    font-size: 15px;
}

.flagsize {
    width: 40%;
    float: left;
    height: 140px;
    width: 250px;
    margin-right: 10px;

}

.services {
    float: left;
}

[ ](https://en.wikipedia.org/wiki/Non-breaking_space). [check this answer](http://stackoverflow.com/a/9792926/3682535) — rupinderjeet, Jan 14 '17 at 15:43
yes but isnt that for just one space? Im trying to find a code that lets you have spacing without placing &nbsp on every space. — RagnaLugria, Jan 14 '17 at 15:45
I would strongly advise changing your HTML to make this both more semantically appropriate and far easier to style as you wish. — David Thomas, Jan 14 '17 at 15:51

score 0 · Answer 1 · answered Jan 14 '17 at 15:47

0

You can use

&nbsp ;

to create a single space or repeat it as many as you want but the better solution is to give your text a padding Try

 padding-left:5em ;

answered Jan 14 '17 at 15:47

Fady Sadek

1,091
1
13
22

score 0 · Answer 2 · answered Jan 14 '17 at 15:52

Just use a table:

  .services-margin {
    margin-bottom: 25px;
}

.country-title {
    font-weight: bold;
    font-size: 15px;
}

.flagsize {
    width: 40%;
    float: left;
  clear: both;
    height: 140px;
    width: 250px;
    margin-right: 10px;

}

  <div class="col-md-6 services-margin">
                <img class="flagsize" src="../../../img/flag_brunei.png">
                <div class="services">
        <table>
         <tr>
          <td>Ambulance</td><td>991</td>
         </tr>
         <tr>
          <td>Police</td><td>993</td
          </tr>
        </table>
                </div>
    </div>

This is not tabular data and we've been advising people not to use tables for layout for well over a decade. — Rob, Jan 14 '17 at 15:55

score 0 · Answer 3 · answered Jan 14 '17 at 15:56

0

Try to add some left margin or padding to .services:

.services {
  padding-left: 15px; /* any value you like */
}

answered Jan 14 '17 at 15:56

Johannes

64,305
18
73
130

Markandeya · Answer 4 · 2017-01-14T16:03:53.713

0

pre tags can be used to preserve spaces and line breaks. I hope this is what you were looking for -

<pre>
This will detect    all   spaces and
line
breaks.
</pre>

edited Jan 14 '17 at 16:03

answered Jan 14 '17 at 15:57

Markandeya

507
4
13

score 0 · Answer 5 · answered Jan 14 '17 at 16:03

You dont want to mess around with adding spaces etc, you need to do it all with styling. You could put classes on the bits of text you want to align, something like this:

.services-margin {
    margin-bottom: 25px;
}

.country-title {
    font-weight: bold;
    font-size: 15px;
}

.flagsize {
    width: 40%;
    float: left;
    height: 140px;
    width: 250px;
    margin-right: 10px;

}

.services {
    float: left;
}

.contact{
  float:right;
}

<div class="col-md-6 services-margin">
                <img class="flagsize" src="../../../img/flag_brunei.png">
                <div class="services">
                    <p class="country-title">Brunei</p>
                    <p>Ambulance:<span class="contact">991</span></p>
                  <p>Police:<span class="contact">993</span></p>
                  <p>Fire and Rescue:<span class="contact">995</span></p>
                  <p>Search and Rescue:<span class="contact">998</span></p>
         
                </div>
    </div>

score 0 · Accepted Answer · answered Jan 14 '17 at 16:06

Judging from col-md-6 class you probably use Bootstrap so basically you could simply do

   <div class="col-md-6 services-margin">
                <img class="flagsize" src="../../../img/flag_brunei.png">
                <div class="services">
                    <p class="country-title">Brunei</p>
                    <p>Ambulance         <span class="pull-right">:991</span></p>
                    <p>Police            <span class="pull-right">:993</span></p>
                    <p>Fire and Rescue   <span class="pull-right">:995</span></p>
                    <p>Search and Rescue <span class="pull-right">:998</span></p>
                </div>
    </div>

Adding spacing between text in html

6 Answers6