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

has an inline-block
• , 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!