Eliminate unnecessary gaps by using HTML to position images side by side without vertical space

Question

Eliminate unnecessary gaps by using HTML to position images side by side without vertical space

I am just starting out with html and css coding and recently I built my first website using wordpress.

On one of the pages in wordpress, I wanted to display images next to each other with a small space between them. I achieved this successfully, but unfortunately the images are not aligned horizontally. The second and third images appear lower than the first image.

Here is the html code that I used without modifying any css:

<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1-150x150.jpg" alt="Image_1" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2-150x150.jpg" alt="Image_2" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3-150x150.jpg" alt="Image_3" width="150" height="150" hspace="10/" />
</a>

Any assistance on how to fix this issue would be greatly appreciated.

Thank you, Demis

html css wordpress image alignment

Answer 1

Answer №1

A small amount of CSS code is required to complete the task. You can find a comprehensive guide on how to do so here.

Answer 2

A small amount of CSS code is required to complete the task. You can find a comprehensive guide on how to do so here.

Answer 3

Answer №2

@ Punctweb

It's interesting that the code below worked for Punctweb when I simply placed the images side by side. However, I must admit that this code doesn't seem entirely correct to me.

<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img class=" alignnone" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" width="150" height="150" hspace="10" /></a> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" width="150" height="150" hspace="20" /></a> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" width="150" height="150" hspace="0" />

Answer 4

@ Punctweb

It's interesting that the code below worked for Punctweb when I simply placed the images side by side. However, I must admit that this code doesn't seem entirely correct to me.

<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img class=" alignnone" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" width="150" height="150" hspace="10" /></a> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" width="150" height="150" hspace="20" /></a> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" width="150" height="150" hspace="0" />

Answer 5

Answer №3

Make sure to double-check for any other CSS rules that may be affecting your elements on the page. Additionally, there seems to be an extra slash (/) in the hspace attribute of your third image.

Here is a helpful example: http://jsfiddle.net/0fe0w32s/

HTML

<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg" class="my_image"><img style="float: left;" src="http://high-resolution-photos.com/stock_photos/royalty_free_3.jpg" alt="Northern_Ireland_MDM_Indicator" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg" class="my_image"><img style="float: left;" src="http://www.gettyimages.com/CMS/Pages/RoyaltyFree/StaticContent/113198687.jpg" alt="Northern_Ireland_School_Service_Areas" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg" class="my_image"><img style="float: left;" src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="PCs_Gross_Wage" />
</a>

CSS

.my_image {
    display: block;
    float: left;
    margin-right: 10px;
}

.my_image img {
    width: 150px;
    height: 150px;
}

Edit 2: Please remove the BR tags within the containing paragraph so that your final code will appear like this

<p><a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" height="150" hspace="10" width="150">
    </a>
    <a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" height="150" hspace="10" width="150">
    </a>
    <a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" height="150" hspace="10" width="150">
    </a>
</p>

Answer 6

Make sure to double-check for any other CSS rules that may be affecting your elements on the page. Additionally, there seems to be an extra slash (/) in the hspace attribute of your third image.

Here is a helpful example: http://jsfiddle.net/0fe0w32s/

HTML

<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg" class="my_image"><img style="float: left;" src="http://high-resolution-photos.com/stock_photos/royalty_free_3.jpg" alt="Northern_Ireland_MDM_Indicator" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg" class="my_image"><img style="float: left;" src="http://www.gettyimages.com/CMS/Pages/RoyaltyFree/StaticContent/113198687.jpg" alt="Northern_Ireland_School_Service_Areas" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg" class="my_image"><img style="float: left;" src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="PCs_Gross_Wage" />
</a>

CSS

.my_image {
    display: block;
    float: left;
    margin-right: 10px;
}

.my_image img {
    width: 150px;
    height: 150px;
}

Edit 2: Please remove the BR tags within the containing paragraph so that your final code will appear like this

<p><a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" height="150" hspace="10" width="150">
    </a>
    <a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" height="150" hspace="10" width="150">
    </a>
    <a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" height="150" hspace="10" width="150">
    </a>
</p>

Eliminate unnecessary gaps by using HTML to position images side by side without vertical space

Answer №1

Answer №2

Answer №3

Similar questions

Tips for successfully implementing a basic JQuery code in Internet Explorer

Utilizing the map function in React to create a button reference

The width of my root container does not display at a full 100% in mobile dimensions

What is the best method for retrieving the dynamic image title from WordPress using the "get_the_post_thumbnail" function?

Adjust the badge color on the zabuto calendar

Prevent keypress from being detected while the confirm box is displayed

Need help incorporating a "section trail" into your website's navigation sidebar using JS/jquery? Here's how you can do it!

Creating a blank webpage after including a component tag for an Angular form

Basic event listener function, functional in CodePen but not operating in Chrome web browser

When an element is focused using jQuery, allow another element to become clickable

Updating a class within an AngularJS directive: A step-by-step guide

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

Stylized with different images scattered across the browser window

What is the best way to show the response data in an input text field within an HTML form?

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

Using JQuery to delete an item by clicking on the delete button and then clicking on the item to remove it

Customizing Bootstrap CSS

Using media queries in CSS to create responsive designs

Retrieve information from a SQL database table and present the output in an HTML table format

Instructions for using jQuery to replace the final <a> tag within a specific section