Sunday, August 9

White Space between HTML elements

Working on a dojo project recentaly, I came across series of buttons that had unnecessary white space. At first, I strongly believed that it was dojo that was causing the problem, so googled it out with dojo in the keyword. It took a little time (embarrassed) but I got to know that there are unnecessary white spaces between HTML elements that causes such issues. Amused. I had to deal with such whitespaces for images earlier but setting display property worked. However, I had never thought of the reason why such behavior exist.

Google and Stackoverflow to rescue.
1) Remove the white space from your code. So all your HTML tags start and end without any white space. This leaves with no indentation. For eg
<a>Some text</a><a>Another text</a>
See the above code, there is no literal spacing between two tags. This should work in all browsers

2) Setting the font-size to 0 also works. But it has some limitations and bugs when used with other  css properties such as @font-face and font-size in em

3) Set a negative margin in css to those elements. I personally find it weird, but this is also one of the solutions.

4) Using float property on such elements will work too. Yes it does, and this also seems a good solution.

5) Can I wrap my loose HTML tags within some div or span or ul > li (?) I wonder because I used to properly format and write semantic code, I had never encountered such issue earlier. I feel this is the best solution.

The best resource and in-detail discussion can be found at css-tricks.com

Be the first one to Comment!!!

Post a Comment