How to remove the space between inline-block elements?

In this tutorial, we will learn how to remove the space between inline-block elements in CSS. By Anjali Singh Last updated : July 11, 2023

Introduction

This question has become rather popular. How does one remove whitespaces between the inline-block elements? The interesting thing is there are numerous solutions to this but not all of them are easy and most of them require JavaScript and all. So, what about people who have just started coding and have no idea about JavaScript and other languages? Well, there is nothing to be worried about, there are answers which do not require you to make use of JavaScript. So, let us move on and see how that is possible.

Removing the space between inline-block elements

There are a couple of answers to this question but we will discuss only three of them. As you don't want to be confused in your initial stage of coding besides these answers are the best and they are very easy to understand and implement. So, without much delay let us move on with the answers.

Method 1

First and foremost, you can solve this problem by using minimized HTML. Well, what does that mean? Right, it means that you can minimize the code of your HTML to achieve what you desire and that is to remove spaces between in-line block elements.

Well, it sounds pretty easy but how does one do it? For that, you will have to look at the syntax below for proper understanding.

Syntax:

<ul>
<li>
first</li><li>
second</li><li>
third</li><li>
</ul>

Method 2

Well, this was one method of minimizing HTML, there is one more way besides this one by which you can achieve the same result. So, look at the syntax below to get the idea.

Syntax:

<ul>
<li>first</li
><li>second</li
><li>third</li>
</ul>

The code here might seem a bit weird and it is not the conventional code but still, this trick helps in removing the spaces between the inline-block elements. Well, these two would surely work but there is one more trick that you can use for solving the problem.

Method 3

You would be amazed to know this trick. In this trick, all you need to do is make use of comments while creating inline-block elements. Well, yes it sounds a bit confusing but the trick is very efficient and you will surely get what you desire. So have a look at the syntax for the implementation.

Syntax:

<ul>
<li>first</li><!--
--><li>second</li><!--
--><li>third</li>
</ul>

Syntax:

<ul>
<li>first</li><!--
--><li>second</li><!--
--><li>third</li>
</ul>

CSS example to remove the space between inline-block elements

<!DOCTYPE html>

<html>

<head>
    <style>
        ul {
            list-style: none
        }
        
        li {
            background: pink;
            display: inline-block;
            padding: 4px;
        }
    </style>
</head>

<body>
    <ul>
        <li>this</li>
        <li>is</li>
        <li>Includehelp</li>
    </ul>
</body>

</html>

Output

How to remove the space between inline-block elements?

Well, these tricks are pretty amazing. But these are not all, there are more tricks out there but if you have just started your work in web development then these tricks would surely help you whenever you come across the same problem and otherwise, you are always free to explore some other tricks which you may find suitable.

CSS Examples »

How to convert px into em in CSS?

How to create and use CSS triangle?