5 ways to quickly remove Inline-Block whitespace in HTML

The inline-block attribute value becomes very useful when you need to control margin and padding on "inline" elements. 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: Leave no spaces between elements

A 100% solution to this problem is to leave no spaces between elements in your HTML code:

<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 very practical, very intuitive, and more importantly... very reliable.

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

The best solution to this white space 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 elements, you 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 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 margins

  It’s 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:

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

  This method is least recommended because you have to consider various situations, Sometimes there are some unforeseen gaps. It's best not to use this trick.

  Method 5: Head to tail connection

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

  <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, they are still very useful, 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 learning. I also hope that everyone will support the PHP Chinese website.

  For more 5 ways to quickly remove the blank space of Inline-Block in HTML, please pay attention to the PHP Chinese website for related articles!