How to remove the space between inline-block elements in CSS?
Answer: Using CSS margin property
The inline-block elements in HTML have some spaces between them for visual clarity. The spaces between the inline-block elements can be removed by using CSS property. There are multiple ways to do so.
In this tutorial, we will use various ways to remove space between inline-block.
Removing white-space between inline-block elements
We can use margin to remove the spaces between the elements. Set the negative value to the margin-right property. Here we have created an unordered list. It is a block-level inline element. We will remove space from the list elements.
Example: Remove space between inline elements using the margin property
Here, we have a simple example where we have added an unordered list and removed the space between them using the CSS margin property. We have added margin-right: -6px to remove the space between elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
ul li {
display: inline-block;
background: #ff2345;
margin-right: -6px;
}
</style>
</head>
<body>
<ul>
<li>item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
</ul>
</body>
</html>
Output
Here is the output of the above program.
Using font-size property
The other way to remove the space between inline-block elements is by using the CSS font-size property. Here we will take the nav elements to create an inline link with no space between them.
Example: Removing spaces between inline-block elements using the font-size property
Here in the example, we have used font-size: 25px; along with some other CSS properties. The font-size successfully removes the space between nav items.
Conclusion
The above examples are the simplest method to remove space between inline-block elements using CSS. You can choose either of the two methods to remove space.
