askvity

How do I Move an Image Side by Side in HTML?

Published in HTML CSS Images 5 mins read

To place images side by side in HTML, you typically use CSS to control their layout. One common and effective method is by setting the display property to inline-block.

Using display: inline-block allows elements (like images) to behave like inline elements, flowing in a line, but also allows you to set their width and height, much like block elements. This makes them perfect for sitting next to each other on the same line.

Using display: inline-block for Side-by-Side Images

This is a widely used technique because it offers good control over spacing and alignment compared to just using the default display: inline property of <img> tags.

Here's how you implement it:

  1. Wrap your images: It's often helpful to wrap each image in a container element, like a div or figure. This makes it easier to apply styles consistently and manage layout, especially for adding borders or captions.
  2. Apply display: inline-block: Use CSS to target either the image elements directly or their container elements and set the display property to inline-block.
  3. Adjust spacing (Optional but recommended): You might need to adjust spacing between the images using margin or deal with the default space caused by line breaks in your HTML source code.

HTML Structure

You'll have multiple <img> tags in your HTML. For better control, consider wrapping them:

<div class="image-container">
  <img src="image1.jpg" alt="Description of image 1">
  <img src="image2.jpg" alt="Description of image 2">
  <!-- Add more images as needed -->
</div>

CSS Styling

Now, apply the necessary CSS to make them appear side by side:

.image-container img {
  display: inline-block; /* This is the key property */
  max-width: 48%; /* Example: adjust based on how many images */
  height: auto; /* Maintain aspect ratio */
  margin: 10px; /* Add some space around images */
  vertical-align: top; /* Helps align images nicely if they have different heights */
}

/* Optional: Deal with space caused by code formatting */
.image-container {
  font-size: 0; /* Collapse space */
}

.image-container img {
  font-size: 16px; /* Reset font size within images */
}

Explanation of CSS:

  • display: inline-block;: Makes the images flow horizontally while allowing margin/padding/width.
  • max-width: 48%;: Ensures images take up less than half the container width, leaving space for the other image and margins. Adjust this percentage based on the number of images you want per line and desired spacing.
  • height: auto;: Prevents distortion by maintaining the image's aspect ratio.
  • margin: 10px;: Adds 10 pixels of space around each image, separating them visually.
  • vertical-align: top;: Useful if images have different heights; prevents them from aligning along their baselines, which can look awkward.
  • font-size: 0; on the container and font-size: 16px; on the image is a common trick to eliminate the small gap that can appear between inline-block elements due to whitespace (like spaces or line breaks) in the HTML source code.

Example Table: HTML & CSS Side-by-Side

HTML Structure CSS Styling
<img src="img1.jpg" alt="Image 1"> img { display: inline-block; margin: 5px; }
<img src="img2.jpg" alt="Image 2">

Note: This table shows a simplified example without container divs.

Alternative Methods

While display: inline-block is a solid choice, especially referenced, other CSS layout techniques can also be used to place elements side by side:

  • Floats (float: left;): Images can be floated left or right, allowing text or other content to wrap around them. This is an older method often used for images within text paragraphs but can also work for multiple floated images. Requires clearing floats afterwards.
  • Flexbox (display: flex;): Using Flexbox on a container element is a modern and powerful way to arrange its direct children (including images) in a row or column, with robust control over spacing and alignment. This is often preferred for more complex layouts.

For simply putting two or more images next to each other on the same line, display: inline-block or Flexbox are generally recommended.

Key Considerations

  • Image Sizes: Be mindful of image dimensions. Using max-width: 100%; within a container or setting a percentage width on the images themselves (max-width: 48%;) helps make your layout responsive and prevents images from overflowing their container.
  • Responsiveness: On smaller screens, side-by-side images might become too small. You can use CSS media queries to change the display property back to block (or stack them differently using Flexbox/Grid) on mobile devices, causing them to stack vertically instead.

In summary, setting the display property to inline-block is a fundamental technique to place images side by side in HTML using CSS, offering a good balance of control and simplicity.

Related Articles