How to remove the space between inline/inline-block elements? (HTML/CSS)
You have a problem
When you use two inline elements on the same nesting level, HTML creates some visual space on the screen (4px space, to be clear).
Like this:
And you want to remove space (gap) between two inline or inline-block elements.
Here's how to do it.
Solution #1
The most simple solution is to write inline elements in one line.
Example:
<p>
<span>Nick</span><span>Bull</span>
</p>
Result:
Solution #2
The next solution is to use font-size
property.
Add font-size: 0
to the parent element, and then declare a sensible font-size
on the children.
Example:
<p>
<span>Nick</span>
<span>Bull</span>
</p>
p {
font-size: 0;
}
span {
display: inline-block;
width: 75px;
background-color: green;
font-size: 16px;
}
Result:
Solution #3
Add display: flex;
to the parent element.
Example:
p {
display: flex;
}
span {
display: inline-block;
width: 75px;
background-color: green;
}
Result:
In the end...
Hope you found these solutions useful for you!
I share a lot of useful HTML and JavaScript tips on Twitter, if you want to upgrade your skills don't forget to follow me (or just to say Hi)
And also, every week I send out a "3–2–1" newsletter with 3 tech news, 2 articles, and 1 piece of advice for you.