u
Causes of whitespace
i
Templates
Whitespace cannot easily be avoided when a page with little text, often a stub, contains an infobox or similar vertical template that is quite tall along with a navbox or similar horizontal template at the bottom, and the amount of text on the page takes up far less space than the template to the left. Even without a horizontal template, there may still be a lot of whitespace to the left of the template between the final line of text and the category box at the bottom.
Images
Sometimes, images can contribute to whitespace. But the size of images can be controlled, so if an image is causing there to be a lot of whitespace, it may be worth reducing the size of the image, even just a little, in order to fill more of that space with text (depending on display width). Beware, though, of making one image significantly narrower than all others.
On a short page, a single image may be to blame for whitespace. If the height of the image is greater than that of the text, there will be some whitespace at the bottom.
On a longer page divided by multiple headings, it may be desirable to provide a small amount of whitespace by using the {{Clear}}
family of templates so the image does not protrude into the next paragraph or section. Using several blank lines, <br />
tags or {{Break}}
will not work correctly for all display widths, and surplus blank lines are removed by a number of processes.
Many infoboxes take an image, so if an image is placed there, it'll add more height that may benefit from balancing with text and other left-justified content.
Invisible comments
Comments in the wikicode added by <!-- Comment -->
can contribute to whitespace. Format the comment to avoid this, by ensuring either that the initial <
touches the text immediately beforehand, or that the final >
touches the text immediately afterwards:
... the end of a paragraph. <!-- Don't use hidden comments in this manner --> The beginning of a paragraph ... ... the end of a paragraph. <!-- but doing it this way is fine -->The beginning of a paragraph ... ... the end of a paragraph.<!-- and so is doing it like this --> The beginning of a paragraph ...
Addressing the whitespace issue
Sometimes, when you have undesirable whitespace, the best way to solve the problem is to expand the article (with suitable content).
Sometimes, a minor fix will help eliminate or reduce whitespace. This may involve adding or removing one blank line from some part of the page, re-ordering templates, or the use of a gallery for multiple images. If an embedded list creates white space, using two or more columns may solve the problem.
Caveats
Avoid "fixing" white space issues which are peculiar to your combination of screen, window, and font sizes, your choice of browser, your image settings, and so on. Check with other settings or systems, or ask other editors to check them for you.
Avoid "fixes" which break the appearance of the page on mobile devices. Again, if you do not have a suitable device on which to check, other editors can advise you.
j