As you insert photos into your webpage, the browser displays the images pushed up against each other by default. The lack of space between the graphics makes it hard for your visitor to view them because the photos do not appear to be separate. Fortunately, Hypertext Markup Language (HTML) provides solutions that allow you create the distance you require. Use your computer's text editor software to enter the HTML that adds space between your pictures.
- Skill level:
Other People Are Reading
Open your text editor software and the webpage that contains your pictures.
Position your cursor between the two "<img>" code tags that you want to space apart. Type the " " non-breaking space HTML character entity to produce a small space between this picture and the one that follows it. For example:
<img src="picture1.gif" /> <img src="picture2.gif" />
The non-breaking entity produces a space that widens the area between the two pictures and keeps them on the same line.
Enter the "" break tag after an image code. The break element forces the next picture to appear on a different line. Type your code as follows:
<img src="picture1.gif" />
<img src="picture2.gif" />
Save your document. Your pictures now have spaces between them.
Tips and warnings
- You have the option to use multiple character entities or break tags to create a larger space between the pictures. To illustrate, use more than one break element like the following example:
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for