Remove Space Between Inline-block Elements

In this article, we will discuss How to Remove Space Between Inline-block Elements. We are focused on this topic because sometimes, we need to align the inline-block elements without space. Such as the image gallery. If you have to create the image gallery with inline-block element then the major problem is the space between them.

Suppose we have two inline-block elements and give them light background color. To prominent the elements width and space between them. Here is the code below which will be generated the effect. You can copy the below code and test on your editor.

Did you know: HTML Redirect Code With Implementation

When you will run the above code we will observe the space between Foo and Bar. If we will change the Foo & Bar with images then the spacing remains. Here is the code of image gallery example.

Replace the directory with your image source path, and it will generate the following results.

How to Remove Space Between Inline-block Elements

Did you know: How to Horizontally Center Div in another Div

No Space Between Elements

Now we have wanted to remove the space between the inline-block elements. The simple solution for this problem is to write the code without any space like below.

It will generate the following results, you can clearly observe that space between inline-block elements is now removed.

How to Remove Space Between Inline-block Elements 2

Did you know: How To Change input placeholder color with CSS

Dropping Closing Angle

There is also an alternative to the above code. Right now we combine the end tag with starting tag. If you will connect the closing angle bracket with the starting bracket of the new tag then it will generate the same results. Here is the code below in which I have applied this scheme.

Did you know: How To Set cellpadding and cellspacing in CSS

Negative Margin

There is another solution to Remove Space Between Inline-block Elements. You have to add the negative margin or even the zero margin. This is not the optimal solution because if the device screen gets changed, the margin is also changed. It will work if you have the fixed target screen. Here is the code below with negative margin.

Did you know: How To Proportionally CSS Scale Images

HTML Comments

With this method, you can also eliminate the space between inline-block element. Create the comment which is connected with end tag and start tag, you can observe from the following code.

Did you know: Create CSS Transition Shorthand with Multiple Properties

These are the best solution. There are also some other solutions but they are not cross-browser friendly. Now you can compare the output with this image. By this, you can create the image gallery which is aligned horizontally and without any space in between images. If you still any confusion about Remove Space Between Inline-block Elements, please comments below.

SHARE