What is the best way to adjust the spacing between images?

Question

What is the best way to adjust the spacing between images?

I am currently working on a website project, and I have included the link to the site below:

link

HTML CODE:

 <ul class="instagram-images">
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_1'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_1').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_2'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_2').'" wrap_margin="10" s="t"]'); ?></a></li>
                <div class="clearfix"></div>
                <li class="big-news pull-left"><?php echo do_shortcode('[display-posts include_excerpt="false" category="news" image_size="news" wrapper="div" posts_per_page="1" orderby="date"]'); ?></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_3'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_3').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_4'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_4').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_5'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_5').'" s="t"]'); ?></a></li>

                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_6'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_6').'" s="t"]'); ?></a></li>
                <li class="big-news pull-right rightm"><?php echo do_shortcode('[display-posts include_excerpt="false" offset="1" category="news" image_size="news" wrapper="div" posts_per_page="1" orderby="date"]'); ?></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_7'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_7').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_8'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_8').'" s="t"]'); ?></a></li>

                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_9'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_9').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_10'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_10').'" s="t"]'); ?></a></li>

                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_11'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_11').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_12'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_12').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_13'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_13').'" s="t"]'); ?></a></li>
                <li><a target="_blank" href="<?php echo ot_get_option('instagram_photo_14'); ?>"><?php echo do_shortcode('[instagram_embedding url="'.ot_get_option('instagram_photo_14').'" s="t"]'); ?></a></li>
            </ul>

CSS CODE:

.instagram-images li{
  width:18%;
  margin:0 0.8%;
  display:inline-block;
}
.instagram-images li img{
  margin:0.5% 0;
}

To provide a clearer understanding of what is being described, I have attached an image that illustrates the specific design requirements.

https://i.sstatic.net/m7e01.jpg

The main goal is to achieve a symmetrical and evenly spaced layout throughout the design elements. If there are any uncertainties or further clarifications needed, please feel free to reach out.

Thank you in advance!

html css

Answer 1

Answer №1

The reason for this issue is due to the li elements being displayed as inline elements, causing browsers to add spaces between them as if they were regular text. To fix this, you can set the font-size of the ul.instagram-images > li to 0:

ul.instagram-images > li {
  font-size: 0;
}

ul.instagram-images > li a{
  font-size: 14px; // reset font size
}

However, this solution may not work well on all mobile browsers as some have minimum font size restrictions. Instead of using the li element, consider adding float: left; to eliminate gaps. The success of this method depends on your layout requirements.

Another approach is to remove whitespaces between </li><li> tags to prevent spacing issues. Additional tricks can be found here: css-tricks.com

Answer 2

The reason for this issue is due to the li elements being displayed as inline elements, causing browsers to add spaces between them as if they were regular text. To fix this, you can set the font-size of the ul.instagram-images > li to 0:

ul.instagram-images > li {
  font-size: 0;
}

ul.instagram-images > li a{
  font-size: 14px; // reset font size
}

However, this solution may not work well on all mobile browsers as some have minimum font size restrictions. Instead of using the li element, consider adding float: left; to eliminate gaps. The success of this method depends on your layout requirements.

Another approach is to remove whitespaces between </li><li> tags to prevent spacing issues. Additional tricks can be found here: css-tricks.com

Answer 3

Answer №2

When working with inline blocks, it's important to note that there will be spaces between them if the markup contains spaces.

To address this issue, you can either remove the spaces or explore alternative methods such as using float or flexbox.

Consider a Raw Approach

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid #000;
}

<ul>
  <li>1</li><li>2</li><li>3</li>
</ul>

Alternatively

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid #000;
}

<ul>
  <li>
    1
  </li><li>
    2
  </li><li>
    3
  </li>
</ul>

Utilize Comments

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid #000;
}

<ul>
   <li>1</li><!--
--><li>2</li><!--
--><li>3</li>
</ul>

Avoid Explicitly Closing li Tags

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid #000;
}

<ul>
  <li>1
  <li>2
  <li>3
</ul>

PS: Referenced from this answer (in Russian).

Answer 4

When working with inline blocks, it's important to note that there will be spaces between them if the markup contains spaces.

To address this issue, you can either remove the spaces or explore alternative methods such as using float or flexbox.

Consider a Raw Approach

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid #000;
}

<ul>
  <li>1</li><li>2</li><li>3</li>
</ul>

Alternatively

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid #000;
}

<ul>
  <li>
    1
  </li><li>
    2
  </li><li>
    3
  </li>
</ul>

Utilize Comments

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid #000;
}

<ul>
   <li>1</li><!--
--><li>2</li><!--
--><li>3</li>
</ul>

Avoid Explicitly Closing li Tags

ul {
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  border: 1px solid #000;
}

<ul>
  <li>1
  <li>2
  <li>3
</ul>

PS: Referenced from this answer (in Russian).

What is the best way to adjust the spacing between images?

Answer №1

Answer №2

Consider a Raw Approach

Alternatively

Utilize Comments

Avoid Explicitly Closing li Tags

Similar questions

The art of jQuery: Effortlessly animate the deletion of a CSS property

Using the jQuery Selector with multiple IDs will yield different results compared to using a single ID selector

Why isn't the image showing up as a list style?

The event listener for changing radio buttons

Submitting an HTML form to trigger a PHP function through AJAX

Styling is lost in FancyBox popup when loading Partial View

Social Engine is incapable of analyzing the HTML code

Solving the default font problem in Laravel

Connecting files within a directory using the Shiny framework

What is the best way to showcase a half star rating in my custom angular star rating example?

Steps to transfer text from one input field to another by clicking a button using JavaScript

Angular's Innovative 3D-esque Carousel Rotation

How can you utilize positioning and margins with Flexboxes?

Get the username from Parse instead of using the ObjectID

Using Bootstrap 4 causes text to wrap buttons onto a separate line

How can I implement a loop to showcase bootstrap popover content?

What is the best way to create a functional submenu using Bootstrap?

When the Bootstrap carousel slides, enhance the navbar text with motion blur effects

The sizing of cards in Bootstrap is not uniform

What is the best way to restrict the row height to match a set column height in Bootstrap?