Help:Whitespace

Whitespace refers to any
Whitespace is not always desirable. It can give the page an untidy appearance and make the article look incomplete. But it cannot always be avoided, and there are times, when used sparingly, whitespace can enhance readability and visual balance, helping readers to better navigate and absorb the content on the page.
Causes of whitespace
Table of contents
On pages with multiple headings, a
There are various ways to modify the appearing of the table of contents. Entering the templates {{TOC left}}
or {{TOC right}}
at the top of the page will produce a table of contents to the left or right that does share its lines with some text. The magic word __NOTOC__ will cause the table of contents to be altogether absent, which for some pages may be necessary.
It is also possible to produce your own table of contents as follows:
{| id="toc" class="toc" summary="Contents"
! {{MediaWiki:Toc}}
|-
|[[#Heading 1|Heading 1]] {{·}} [[#Heading 2|Heading 2]] {{·}} [[#Heading 3|Heading 3]]
[[#Heading 4|Heading 4]] {{·}} [[#Heading 5|Heading 5]] {{·}} [[#Heading 6|Heading 6]]
__NOTOC__
|}
In an automatically generated table of contents, there will be one listing per line. But in a self-produced table of contents, multiple listings can be condensed into one line, as much as space allows, using the line break (<br />) text to mark the end of a line. The drawback to this is that you will have to manually add, remove, or modify headings as they are edited on the page. Still, it'll reduce the amount of whitespace on the page.
Templates
Whitespace cannot easily be avoided when a page with little text, often a
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
<!-- 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
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.