Smaller space than  

Viewed 16240

Are there characters that are "smaller" (e.g. half the size) than  ?

I am laying out my contact details on my website like so:

I'm trying to align my phone number with the email address above it:

Email:  email address here
Tel        telephone number here

If I was to add yet another non-breaking space the number would move too far right.

5 Answers

I agree with the other answerers, you are definitely using the wrong tool. If you are a beginner and CSS is over your head, use a table, it's really simple:

<table>
  <tr> <td>Email</td> <td>whatever</td> </tr>
  <tr> <td>Tel.</td>  <td>012345</td> </tr>
</table>

However for anybody who is really in need of unusual spaces, Wikipedia has an overwhelming selection. Notably there is thin space (&thinsp;, breaking) and Narrow No-Break Space (#x202F;, non-breaking).

You're barking up the wrong tree. Markup your data properly and align it using CSS, not using spaces or tabs. That's fundamentally a futile approach. E.g.:

<dl>
    <dt>Telephone</dt>
    <dd>012 3456 6789</dd>

    <dt>Email</dt>
    <dd>foo@example.com</dd>
</dl>

dl {
    overflow: hidden;
}

dt {
    float: left;
    clear: left;
    width: 150px;
}

dd {
    margin-left: 170px;
}

The method you have chosen to align email and telephone is frankly straight out of the dark ages. There are modern ways to do this that will do the job in a much saner and more maintainable manner, i.e. using appropriate HTML and CSS:

<label>Email:</label> email address here
<label>Tel:</label> telephone here

Apply a uniform width to the labels with CSS and you are good to go:

label { width: 5em; display: inline-block }

Even something as basic as the above gives you bonuses like the ability to modify the width of all labels at once and choose left or right justification "for free" on top of justifying the content.

Live example.

You need to use css attribute 'margin-left' by creating span tags for email and phone no. In css you can able to assign margin in pixel

Space was looking too big so I added padding instead. Margin can also be used as it makes no difference here.

-xLTx- means to put the less than < character in there.

You can use:
-xLTx-h1>Save/Retreive-xGTx-span style="padding-left:5px;">Data-LTx-/span>-xLTx-/h1>

You could also use:
-xLTx-h1>Save/Retreive-xLTx-span style="margin-left:5px;">Data-xLTx-/span>-xLTx-/h1>

Adjust the padding or margin to your liking.

Related