A2oz

How do I add space between images in HTML?

Published in HTML 2 mins read

You can add space between images in HTML using CSS. Here are a few common methods:

1. Using margin

The margin property in CSS controls the space around an element. You can apply margin-bottom to the image to add space below it:

<img src="image.jpg" alt="Image description" style="margin-bottom: 20px;">

This will add a 20px space below the image.

2. Using padding

padding is another CSS property that adds space inside an element, between the content and the border. You can apply padding-bottom to the image's container to add space below the image:

<div style="padding-bottom: 20px;">
  <img src="image.jpg" alt="Image description">
</div>

This will add a 20px space below the image, even if the image is not the only element inside the div.

3. Using display: inline-block and margin

If you want to control the spacing between multiple images in a row, you can use display: inline-block and margin:

<img src="image1.jpg" alt="Image description" style="display: inline-block; margin-right: 10px;">
<img src="image2.jpg" alt="Image description" style="display: inline-block; margin-right: 10px;">
<img src="image3.jpg" alt="Image description" style="display: inline-block;">

This will display the images in a row, with a 10px space between each image.

4. Using Flexbox

Flexbox is a powerful CSS layout method that offers more control over spacing and alignment. You can use Flexbox to create a row of images with spacing between them:

<div style="display: flex;">
  <img src="image1.jpg" alt="Image description" style="margin-right: 10px;">
  <img src="image2.jpg" alt="Image description" style="margin-right: 10px;">
  <img src="image3.jpg" alt="Image description">
</div>

This will display the images in a row, with a 10px space between each image. You can also use Flexbox to control the alignment of the images within the row.

Remember to adjust the margin values to achieve the desired spacing between your images.

Related Articles