I have following HTML and CSS:
li {
display: inline-block;
padding: 10px;
border: 1px solid red;
margin: 0;
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
I am trying to remove the margin among the li elements by setting margin: 0;
, but it doesn't remove the margin.
How do I remove this gap?
Combining all li
s in a single line solves the problem. But if you want to know more techniques to remove those margins you can visit : http://davidwalsh.name/remove-whitespace-inline-block.
It lists these techniques:
<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}
.inline-block-list li {
font-size: 14px; /* put the font-size back */
}
<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>
.inline-block-list li {
margin-left: -4px;
}
<ul>
<li>Item content</li
><li>Item content</li
><li>Item content</li>
</ul>
Its a weird thing where you need to remove whitespace take a look at this fiddle
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
http://jsfiddle.net/TPje6/3/
another thing you can do is add a margin: -2px;
: http://jsfiddle.net/TPje6/6/
Float trick works well also, but makes styling a position more difficult
Try float: left;
That will force your list items to be rendered without the extra whitespace.
li {
display: inline-block;
padding: 10px;
border: 1px solid red;
margin: 0;
float: left;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With