One caveat of setting an element's display
property to inline-block
is that it treats the white spaces (i.e. single space, tabs and line-breaks) between elements the same way white spaces are treated between words of text. This happens because an inline-block
element is supposed to appear like an inline-level element (i.e. appear on the same baseline) whilst maintaining a block-level elements' capabilities such as being able to set the width, height, and top / bottom margins and paddings. This is why we see unwanted gaps appearing between inline-block
elements.
It is important to know that this is actually not a bug, but how an inline-block
element behaves by default.
There are ways to overcome this issue; to demonstrate these, let's consider the following CSS style rule for all examples:
li {display: inline-block; border: 1px solid red;}
#Removing Spaces Between Elements
Quite simply if we remove the white space between elements that are inline-block
we'll get rid of the extra space. This can be done as follows:
By Having All Elements on One Line:
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
Pros:
- Simple and straightforward; no extra markup or style rules required.
Cons:
- In some cases the HTML markup may appear hard to read.
By Removing the Space Between Opening and Closing Tags of Two Elements:
<ul>
<li>Item 1</li><li>
Item 2</li><li>
Item 3</li>
</ul>
Pros:
- Simple and straightforward; no extra markup or style rules required.
Cons:
- It may make the markup look messy or confusing.
- It may become easy to miss the ending / starting tag of an element.
By Adding HTML Comments as Fillers Between Elements:
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>
Pros:
- Helps keep the visual formatting of the document as we intend (making it easy to follow).
Cons:
- Extra markup is required.
- Adding comments to a big list of elements could be a cumbersome job.
#Reset Parent Element's Font Size
ul {font-size: 0;}
li {
display: inline-block;
font-size: 14px; /* reset to default (fallback for old browsers) */
font-size: 1rem; /* for modern browsers use "root em" font size */
border: 1px solid red;
}
The rem
unit (root em) provides a way to specify font sizes as fractions of the root element's font size (i.e. the font size of the html
element). This would help us reset the font size of the inner element the same as the font size of the root element. Please note the browser support for rem
unit before using it. As a fallback you can specify the font size in px
as well.
Pros:
- CSS-only solution, no changes to the markup required.
Cons:
- It may not work across all browsers / devices as there have been some reports of problems on Pre-Jellybean Android devices and Safari 5.0.x.
- Browser support for
rem
unit may be limited, which means resetting the value manually (such as by using thepx
unit). - In cases where using
rem
unit is not an option, usingem
unit to cascade the font sizes to child elements could be an issue.
This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.