How to get rid of empty white space at the bottom

Question

I have a blogger website.I don't have any footer.

There exists a 20px heighted white space at the extreme bottom. I want to remove it.

Here is what i have tried so far.

1.) Since the height of the empty space is 20px, I searched through the entire code for 20px value

2.)I used Chrome's inspect element, nothing could be traced.

3.)Hunted for <br> tags

4) Added this code

html, body { height: 100% !important; }

5). Tried this as well

 body { margin: 0 !important;}

6.) And this too

 #body (margin-bottom: 0px !important;}

I am totally clueless as I have already explored the entire web for troubleshooting.Any tips?

Answer 1

If you inspect your page's source code (Ctrl + U on some OSes, but right-click and View Source or View page source or equivalent should show it), you'll see the following preceding your Google Analytics <script>:

</script>
                        &#8203; 

<script type='text/javascript'>
      var _gaq = _gaq || [];

The culprit is the ​ HTML entity, which according to this answer is the Unicode Character 'ZERO WIDTH SPACE' (U+200B). The answer notes that it is likely the character was accidentally entered due to an alternate language input, like an Arabic key mapping. This is adding a line of space to your site because web browsers aren't going to treat it like the normal ASCII space character (i.e. usually ignore it), and will instead explicitly print the whitespace character. This causes the browser to lay out a line of space for it.

Removing this from your source code should fix the problem. It may not show up in your IDE/text editor, in which case you're better off erasing all of the space between those script tags and re-adding the desired spacing manually.