How to remove Inline-Block whitespace in HTML

This article mainly introduces in detail 5 ways to quickly remove Inline-Block blanks in HTML. Interested friends can refer to it

When you need to control margin on the "inline" element and padding, the inline-block attribute value becomes very useful. With it, you no longer need to make these elements "block" and "float". But there is a problem, when using inline-block, the white space between HTML elements will show up on the page. Very annoying. There are several ways to remove these white spaces; one of them is quite clever.

Method 1: Do not leave any white space between elements

A 100% solution to this problem is in your HTML code Leave no white space between elements:

<ul>   
<li>Item content</li>   
<li>Item content</li>   
<li>Item content</li>   
</ul>

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

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

The best solution to this blank problem is to Set font-size: 0 on the parent element of these inline-block elements. If your 64349c75da2f924823fe3c3e91a71ff3 has an inline-block 8c0e9d2c5e6a7ea41578d97b4d80f7d8, then you can do this:

.inline-block-list { /* ul or ol with this class */   
 font-size: 0;   
}   
.inline-block-list li {   
 font-size: 14px; /* put the font-size back */   
}

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

Method 3: HTML comments

This method is a bit violent, but it can still work. Filling the spaces between HTML elements with comments has the same effect as if there were no whitespace between them:

<ul>
 <li>Item content</li><!-- 
 --><li>Item content</li><!-- 
 --><li>Item content</li>
</ul>

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

Method 4: Negative margin

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

.inline-block-list li {   
 margin-left: -4px;   
}

This method is least recommended because you have to consider various situations, and sometimes there will be some impossible Expected blanks. It's best not to use this trick.

Method 5: First and last connection

Another way to use HTML tags is to close the closing tag of an element to the opening tag of the next element. Together:

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

isn't as ugly as HTML comments, but I'd rather remove those whitespace by hand regardless of code readability.

No method is ideal, but leaving no white space in the page is also a bad method. This is not a warning against using inline-blocks. Inline-blocks are still very useful, but you just need to understand how to deal with the whitespace that appears in them.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Express code analysis using html template

The above is the detailed content of How to remove Inline-Block whitespace in HTML. For more information, please follow other related articles on the PHP Chinese website!