Problem: Elements set to display: inline-block will render with spaces between them if there's whitespace in the source, which makes formatting difficult. You can fix this by putting font-size: 0 on the parent, but it feels pretty hacky.
Created
November 20, 2014 00:36
-
-
Save rosemarydotworld/996930a42065c407094b to your computer and use it in GitHub Desktop.
Inline-block elements without spaces in pure HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Looks good, renders with spaces --> | |
| <ul> | |
| <li class="inline-block"></li> | |
| <li class="inline-block"></li> | |
| <li class="inline-block"></li> | |
| </ul> | |
| <!-- Looks crappy, renders without spaces --> | |
| <ul><li class="inline-block"></li><li class="inline-block"></li><li class="inline-block"></li></ul> | |
| <!-- Looks pretty good, renders without spaces --> | |
| <ul> | |
| <li class="inline-block"></li><!-- | |
| --><li class="inline-block"></li><!-- | |
| --><li class="inline-block"></li> | |
| </ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment