It is often that I find my junior fellow web designers trying to figure out what is causing an extra space on a web page. So I thought I put together the most basic things that can cause extra space on a web page.
1- Paddings and Margins
Check the padding and margin applied to an element. Certain elements have a default padding and margin applied to them e.g p, ul, li, div etc. So even if you did not add a style to specify the margin or padding on these elements, there is a possibility the browser’s default stylesheet is affecting the margin or padding for the element.
In case there is no padding and margin specified for the element in question. In that case you need to check the css applied to the adjacent elements.
2- HTML <br/> Tag
Another common reason that can cause extra space in the page could be a <br/> tag in the page. So look closely and check for any <br/> tags.
3- Hidden Elements
Check if there is an element around the area which is visible in the design but it has some specified height, padding or margin applied to it.
e.g if there is an empty div in the design <div class=”empty”></div> and then in the CSS somewhere there is a class:
.empty {height:40px; padding: 10px;}
What this would do is, produce some extra space on the page.
4- Unnecessary Javascript
Check if there is some unneeded script around the area. It is common practice that sometime we use Javascript within the body element. Usually this should not cause any extra space but there is a chance that certain scripts would add extra space. e.g it could be a script that changes the CSS applied to the elements around the area in question.
5- Spacer GIF
Some designer have the habit to use spacer gifs files. I don’t see these much now but there is a possiblity that you might come across an old website design that still have spacer gif images. So clearly observer the area in question and look for a gif file. 99% of the times image is named spacer so there will an img tag like <img src=”imageFolder/spacer.gif” />
