Software, your way.
burger menu icon
WillMaster

WillMasterBlog > HTML

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Space Between Words/Images

On web pages, there are various space widths that can be specified between words and characters or images.

The normal or default space is the spacing you see between the words in this paragraph. The spacing is generally referred to as medium spacing. There are also hair spacing, thin spacing, and thick spacing.

Here is a list of various spacing that is available. Each is specified by a named character.

Amount of spaceExample (between letters)Named character for publishing the space
Hair spaceA B C D E F 
Thin spaceA B C D E F 
Medium spaceA B C D E F
(1)(may vary)
 
Medium spaceA B C D E F 
Thick spaceA  B  C  D  E  F  

(1)When a medium space is specified with   and the text is justified, the medium space adjusts its width to match the adjusted default spacing between words for that line. Here is an example.

Letters A B C D E F have adjusted   spacing when stretched for justification.

Publish as space with a named character when you want a specific amount of space or when two words must stay together on one line.

I generally use &thinsp between radio buttons and their label text. Also checkboxes and text. Radio buttons and checkboxes generally have margins, so I remove those first.

Here is an example of that, followed by the source code:

 For a label
<style type="text/css">
input[type="checkbox"], input[type="radio"] { margin:0; }
</style>

<input type="checkbox">&thinsp;For a label

As another example of use, &hairsp; can be used between images to insert a twitch of space between them — so they don't bang up against each other yet don't have the normal amount of space.

Here is an example and the source code:

book #1 coverbook #2 cover
<div>
<img src="https://willbontrager.com/coverimages/Truffles-22-recipes/20201122-cover-200w.jpg" style="max-width:125px;" 
alt="book #1 cover">&hairsp;<img src="https://willbontrager.com/coverimages/First-candy-book/BookCoverARccc(200w).jpg" 
style="max-width:125px;" alt="book #2 cover">
</div>

(The books repesented by the example images can be found at WillBontrager.com.)

When additional space is needed, the named characters can be doubled or tripled or more. As an example, A      B      C      D      E      F uses &ThickSpace;&ThickSpace;&ThickSpace; for each space between the letters.

A&ThickSpace;&ThickSpace;&ThickSpace;B&ThickSpace;&ThickSpace;&ThickSpace;C&ThickSpace;&ThickSpace;&ThickSpace;D&ThickSpace;&ThickSpace;&ThickSpace;E&ThickSpace;&ThickSpace;&ThickSpace;F

When spacing is important, one of the named characters for publishing space may be exactly right for the situation.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Recent Articles in the Library

Plain Text To HTML Converter

Here is a function to convert plain text from a form textarea field into HTML for publishing on a web page or in an email.

HTML for Meme Making

No fancy image creation software is needed to make memes. An easy way is to create a web page with text over an image or color background and screenshot it.

Image Color Saturation

The CSS filter:saturate() declaration can be used to lesson color saturation and to intensify color saturation of images.

PDF to Text Conversion

If you can use a PDF to text converter and your website is on a Linux machine, this one should do you well.

Text Emphasis

When your writing can be improved with the correct emphasis, this CSS may be used.

Dropdown Links

I used to see many dropdown links during the earlier part of my internet experience.

On-Page Editing

Edit something on a web page and have it saved for display whenever the page is reloaded.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2025 Will Bontrager Software LLC