Remove Whitespace Between Inline-Block Elements
The inline-block is very useful CSS property to make block level element to inline-block element. The
inline-block value is incredibly useful when we want to control margin, padding on “inline” elements without the applying them to block and float.Only the One problem that arrases when you apply inline-block is that whitespace in HTML elements. Here i am showing some ways to Remove Spacing Between Inline-Block Elements.
1: Set font-size: 0px; on Parent Element
This is the bet way to of removing white space between elements. set font-size of 0px on the parent to the inline block elements.
HTML:
|
1 2 3 4 5 |
<ul> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> |
CSS:
|
1 2 3 4 5 6 7 |
ul { font-size: 0; } ul li { font-size: 16px; } |
2: No Space Between HTML Elements
Remove all extra blank space from HTML will solve you issue.
|
1 |
<ul><li>Home</li><li>About Us</li><li>Contact Us</li></ul> |
3: Applying Negative Margin
Applying negative merging is an another solution, but i don’t recommend you to use this method, because in this case you have to manage margin according to parent. negative 4px of margin may need to be adjusted based on font size of parent.
|
1 2 3 4 |
ul li{ display: inline-block; margin-right: -4px; } |
[paypal-donation]
