An HTML Tutorial on Blank Space

An HTML Tutorial on Blank Space thumbnail
Using returns or space keys in HTML will yield little results as HTML does not recognize the space key beyond one space or the enter/carriage return.

HTML compresses spaces in the source. Only one space will appear in the rendered page and all else will be compressed. Likewise, the enter/return key is not recognized at all. Blank spaces must be coded in HTML in order to properly instruct the browser to not "compress" the space.

  1. Non-Breakable Space

    • The non-breakable space is the easiest way to add quick, additional spaces to your HTML document. You may add a non-breakable space by inserting " " (without quotes) into the HTML code. One instance of   will create one space (as if you had hit the space bar). If you wanted to have two spaces at the end of the sentence, you would code it like this: "The cat in the hat is fat.  " because HTML does recognize that first time you hit the space key, but not the second time.

    Blank Paragraphs

    • You can simulate carriage returns by putting blank paragraph markup into your code. This is a somewhat "lazy" way to create space but it is quick and simple. You would execute this method by inserting: <p> </p> into your code. Provided the CSS does not override this, it will create a few lines of blank space for you.

    Line Breaks

    • One of the easiest ways to create blank lines in HTML is with the line break markup. You can utilize this handy code by inserting "<br />" without the quote marks into your code. This will take your content to the next line. If you are looking to skip a few lines, you may stack line breaks like: "<br /><br /><br />"

    Padding

    • Though a bit trickier to execute, padding is the most sophisticated way to create blank space in HTML. It is executed by specifying an "indent" from a particular margin (such as left, right, top or bottom). It is executed by surrounding the content to be padded with the following:

      <span style="padding-left:10px">Content here</span>

      In this example, padding-left can be substituted for any other direct and 10px can be changed to any other measurement (in pixels).

Related Searches:

References

  • Photo Credit notebook image by Andrzej Solnica from Fotolia.com

Comments

You May Also Like

Related Ads

Featured