Sometimes we get undesirable gap between HTML element that create unwanted behaviour of element as a result. Fortunately, removing whitespace between HTML elements is not so hard as overall it isn’t a ‘Bug’. In this article we will discuss about some solutions to remove the space.
Understanding whitespace:
First of all check the image on the left and notice the little blue dash after the second image when I hover mouse on these image links, creating a bad impression on design.
And my HTML is with nothing wrong!
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="parent"> <a> ... </a> <a href="#"> <img class="img-rounded src="http://fellowtuts.com/wp-content/uploads/sites/3/2014/07/whitespace.png" /> </a> <a> ... </a> </div> |
The reason we get the spaces is because, well, we have spaces between the elements, just to be clear a line break and a few tabs counts as a space. In our code a and img tags have line breaks, that’s why I am having that.
General HTML Markup: In a common scenario we may have the following markup:
1 2 3 4 5 6 7 8 9 10 11 | <ul class="parent"> <li> Content 1 </li> <li> Content 2 </li> <li> Content 3 </li> </ul> |
Where the list items have inline-blocked display or float: left. The top three solutions are applicable to the specific issue I have mentioned as well as are considerable as general solutions too. So I am also writing these solutions in the form of general use as well.
Removing whitespace: [I] No Space
It’s messy but most reliable that not to put whitespace between those elements in the HTML source code. See the code below:
1 | <div class="parent"><a>...</a><a href="#"><img class="img-rounded src="http://fellowtuts.com/wp-content/uploads/sites/3/2014/07/whitespace.png" /></a><a>...</a></div> |
1 | <ul class="parent"><li>Content 1</li><li>Content 2</li><li>Content 3</li></ul> |
Removing whitespace: [II] Shifting Closing Angle
A HTML-based hack solution is to simply place the closing > next to the start of the next tag:
1 2 3 4 5 6 7 8 9 10 11 | <div class="parent"> <a> ... </a> <a href="#"> <img class="img-rounded src="http://fellowtuts.com/wp-content/uploads/sites/3/2014/07/whitespace.png" /></a> <a> ... </a> </div> |
1 2 3 4 5 6 7 8 9 10 11 | <ul class="parent"> <li> Content 1 </li ><li> Content 2 </li ><li> Content 3 </li> </ul> |
Removing whitespace: [III] HTML Comments
Use HTML comments as spacers between the elements and it works:
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="parent"> <a> ... </a> <a href="#"> <img class="img-rounded src="http://fellowtuts.com/wp-content/uploads/sites/3/2014/07/whitespace.png" /><!-- --></a> <a> ... </a> </div> |
1 2 3 4 5 6 7 8 9 10 11 | <ul class="parent"> <li> Content 1 </li><!-- --><li> Content 2 </li><!-- --><li> Content 3 </li> </ul> |
The solutions I am describing below are useful. They are just not applicable for removing whitespace between HTML elements just in my case. So here are some worthy solutions:
Removing whitespace: [IV] Negative Margin
We can take advantage of inline-block’s flexibility to use a negative margin to negate the space. It may need to be adjusted based on font size of parent.
1 2 3 4 | ul.parent li { display: inline-block; margin-left: -4px; } |
Removing whitespace: [V] Skip Closing Tag
It feels weird but HTML5 doesn’t care anyway about it.
1 2 3 4 5 6 7 8 | <ul class="parent"> <li> Content 1 <li> Content 2 <li> Content 3 </ul> |
Removing whitespace: [VI] Set font size for parent to zero
You can set a font-size of 0 on the parent to the inline block elements. So in our case we have <ul> (class = "parent") with inline-block <li>‘s, we’d do this:
1 2 3 4 5 6 7 | ul.parent { font-size: 0; } .parent li { font-size: 14px; } |
this hack doesn’t work cross browser. Many mobile browsers override this solution. Also it’s not acceptable in case of font-size in percentage or ems value.
Last but not least you can use a templating engine that collapses the whitespaces/linebreaks for removing whitespace between HTML elements or adopt YUI grid system, I just never used that.