How to Add Space Between Pictures in HTML

Written by brandy alexander
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Add Space Between Pictures in HTML
(Comstock Images/Comstock/Getty Images)

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:


  1. 1

    Open your text editor software and the webpage that contains your pictures.

  2. 2

    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.

  3. 3

    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" />

  4. 4

    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:

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.