5 ways to quickly remove the blank space of Inline-Block in HTML

The inline-block property value becomes very useful when you need to control margin and padding on "inline" elements, so you no longer need to make these elements "block" or "float". But there is a problem, when using inline-block, the whitespace between HTML elements will show up on the page. Very annoying. There are a few ways to remove these whitespaces; one of them is quite clever.

Method 1: No space between elements

A 100% surefire way to fix this is to not leave any whitespace between elements in your HTML:

Of course, this looks messy and makes the code difficult to maintain, but it is practical, intuitive, and most importantly... reliable.

Method 2: Set font-size: 0 on the parent element

The best solution to this whitespace issue is to set font-size: 0 on the parent element of these inline-block elements. If you have an inline-block <LI> inside your <UL>, you can do this:

In order to prevent the font size of the parent element from affecting the child element, you need to re-set the font-size value on the child element, which is usually simple. The only time you might run into trouble is if you use relative font sizes. But most of the time, this method can solve your problem.

Method 3: HTML Comments

This method is a bit more brute force, but it works just as well. Padding HTML elements with comments has the same effect as having no space between them:

In one word…disgusting. In two words…disgusting. In three words….OK, you get it. But it works!

Method 4: Negative Margins

Very similar to method 2 , sorry. You can take advantage of the flexibility of inline-block and give them a negative margin to hide the whitespace:

This method is the least recommended because you have to take various situations into account and sometimes there will be some unforeseen gaps. It’s best not to use this trick.

Method 5: Chain Link

Another way to take advantage of HTML markup is to place the closing tag of an element close to the opening tag of the next element:

Not as ugly as HTML comments, but I'd rather remove those whitespaces by hand regardless of code readability.

No approach is ideal, but leaving no whitespace on a web page is a bad approach. This is not to warn you not to use inline-block. Inline-block is still very useful. You just need to understand how to deal with the whitespace inside it.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.