Remove Spacing Between Inline-Block Elements

Inline-block elements in i.e. unordered list will create some spacing between them. Make font-size:0 for the parent element (ul) and add a needed font-size to child elements (li), the spacing will be removed.

nav ul {
	margin:0;
	padding:0;
	list-style:none;
	font-size: 0;
}

nav li {
	margin:0;
	padding:0;
	font-size:18px;
	display:inline-block;
	vertical-align:top;
}

This way there will be no spaces between list items, and you”ll be able to implement what’s required.

Share:
This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

One Response to Remove Spacing Between Inline-Block Elements

  1. Ivy says:

    Really helpful reading here. Thanks for this one. For more list and inline css codes: http://www.generatecss.com/css/list/ — I am using this site as my reference. A really good css generator.

Leave a Reply

Your email address will not be published. Required fields are marked *