code.youlikeshare.com

Remove space between inline-block elements

When you use the inline-block elements to position the layout for list item on the horizontal display, you will notice empty space between each list item. It appears by design and couldn't be removed by configuring the margin to 0. The same issue also happens in DIV tag. However, there are a few workarounds as below to fix it.

Issue

List item organized using inline-block
<ul style="list-style:none; margin:0; padding:0;">
	<li style="display:inline-block; padding:5px; background-color:#ff0;">Item 1</li>
	<li style="display:inline-block; padding:5px; background-color:#ff0;">Item 2</li>
	<li style="display:inline-block; padding:5px; background-color:#ff0;">Item 3</li>
	<li style="display:inline-block; padding:5px; background-color:#ff0;">Item 4</li>
</ul>
  • Item 1
  • Item 2
  • Item 3
  • Item 4
DIV tag organized using inline-block
<div style="display:inline-block; padding:5px; background-color:#ff0">DIV 1</div>
<div style="display:inline-block; padding:5px; background-color:#ff0">DIV 2</div>
<div style="display:inline-block; padding:5px; background-color:#ff0">DIV 3</div>
<div style="display:inline-block; padding:5px; background-color:#ff0">DIV 4</div>
DIV 1
DIV 2
DIV 3
DIV 4

Workarounds

1. Join all list item into a single line
<ul style="list-style:none; margin:0; padding:0;">
	<li style="display:inline-block; padding:5px; background-color:#ff0;">Item 1</li><li style="display:inline-block; padding:5px; background-color:#ff0;">Item 2</li><li style="display:inline-block; padding:5px; background-color:#ff0;">Item 3</li><li style="display:inline-block; padding:5px; background-color:#ff0;">Item 4</li>
</ul>
		
2. Move the <li or <li> tag and place at the end of the previous list item.
<ul style="list-style:none; margin:0; padding:0;">
	<li style="display:inline-block; padding:5px; background-color:#ff0;">Item 1</li><li
	style="display:inline-block; padding:5px; background-color:#ff0;">Item 2</li><li
	style="display:inline-block; padding:5px; background-color:#ff0;">Item 3</li><li
	style="display:inline-block; padding:5px; background-color:#ff0;">Item 4</li>
</ul>

<ul style="list-style:none; margin:0; padding:0;">
	<li style="display:inline-block; padding:5px; background-color:#ff0;">
	Item 1</li><li style="display:inline-block; padding:5px; background-color:#ff0;">
	Item 2</li><li style="display:inline-block; padding:5px; background-color:#ff0;">
	Item 3</li><li style="display:inline-block; padding:5px; background-color:#ff0;">
	Item 4</li>
</ul>
3. Set the font-size to zero in ul and reset it back in li tag.
<ul style="list-style:none; margin:0; padding:0; font-size:0">
	<li style="display:inline-block; padding:5px; background-color:#ff0; font-size:11pt">Item 1</li>
	<li style="display:inline-block; padding:5px; background-color:#ff0; font-size:11pt">Item 2</li>
	<li style="display:inline-block; padding:5px; background-color:#ff0; font-size:11pt">Item 3</li>
	<li style="display:inline-block; padding:5px; background-color:#ff0; font-size:11pt">Item 4</li>
</ul>