user3069987
user3069987

Reputation: 131

Smaller space than  

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.

Upvotes: 9

Views: 20873

Answers (5)

Mark Ludwinski
Mark Ludwinski

Reputation: 1

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.

Upvotes: -1

Torben Klein
Torben Klein

Reputation: 3116

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).

Upvotes: 11

deceze
deceze

Reputation: 522382

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>[email protected]</dd>
</dl>

dl {
    overflow: hidden;
}

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

dd {
    margin-left: 170px;
}

Upvotes: 6

mujaffars
mujaffars

Reputation: 1479

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

Upvotes: -1

Jon
Jon

Reputation: 437554

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.

Upvotes: 2

Related Questions