HTML Spaces: How To Add Them In 4 Easy Ways
    Subscribe

    Join our weekly digest. You’ll also receive some of our best posts today.

      Data

      HTML Spaces: How To Add Them In 4 Easy Ways

      Data
      04/10/22
      5' read
      04/10/22
      5' read

      HTML was invented 30 years ago by Tim Berners-Lee and it has remained relatively unchanged.

      It’s also wildly popular amongst non-developers and grand-dads! Jokes aside, the internet has come a long way since then, but HTML is still being used by all websites and browsers across the globe.

      There are over 1.5 billion websites globally that interact with browsers like Chrome and Safari through HTML.

      While HTML is considered a trivial language to learn, believe it or not some of the simplest things can drive even really smart developers absolutely crazy!

      When you add css and javascript in the mix, coding tends to get a lot more complex, so keeping things simple and using plain, old html code is key.

      However, if you are looking to add simple white space in your HTML, it’s not as easy as getting close and personal with the space bar button. Hitting the spacebar key many times will simply end up in a single space in the web page shown on your browser.

      Thankfully there are a few HTML elements that can be used to add white space in your HTML code.

      Method 1: Non-Breaking Space ( )

      Since multiple spaces always condense down into a single space, we need a way to instruct HTML to add consecutive spaces.

      You can add non-breaking spaces in your html code by using the  .

      Every time you type   HTML will interpret it as a non-breaking space rendered in the same line. You can use as many   html entities together as you like to end up with consecutive blank spaces.

      Although this approach seems trivial, there are significant shortcomings to using  , such as:

      • There is no way to style extra spaces added through   for instance to make them smaller or bigger.
      • Excessive use may result in rendering or layout inconsistencies. Paragraphs or indentation done with   can cause problems while rendering the HTML and overall styling your page.

      As a bonus, you can also use   or   instead of   to add multiple consecutive non breaking spaces. Think of it this way:

      •   will add single non breaking space  in your HTML 
      •   will add double non breaking space in your HTML 
      •   will add triple non breaking space in your HTML 

      Method 2: Preformatted Text (<pre>) Tag

      A slightly fancier way to add spaces to web pages is by using the preformatted text tag, <pre>, which retains spaces, new lines and line breaks. Whatever text you have between <pre> </pre> tags will retain it’s layout. This is commonly used to paste whole paragraphs of text like book snippets or ASCII art (remember those?)

      However, mind that any text inside a pre tag will not maintain any formatting. So you can’t have bold or underline words in the text inside a pre tag. So usage is restricted to a specific set of use cases as described above.

      Method 3: Line spaces with <br>

      If you are looking to add vertical spaces and line breaks in HTML, then none of the above options will work for you. Nbsp will just keep adding same-line spaces and, although pre will retain your line breaks, you won’t be able to style your text in a convenient way. 

      Enter the break tag! <br> will introduce a line break in your text and anything after your <br> will start from the beginning of the next line. This is very convenient for separating text or paragraphs from each other as well as for things like contact information or addresses.

      The line break tag has very similar issues to the non-consecutive space tag (nbsp)

      • There is no way to style extra spaces added through <br> for instance to make them smaller or bigger.
      • Excessive use may result in rendering or layout inconsistencies. Paragraphs or indentation done with <br> can cause problems while rendering the HTML and overall styling your page.

      Method 4: Paragraph spaces with <p>

      Another way to introduce line breaks in through pure HTML without the use of any CSS code is by using the paragraph tag (<p>). Anything between <p> </p> tags is treated as a paragraph, which means that its width will be set to the max width of its parent element and a line break will be added at the end of the closing </p> tag. Therefore you can use it every time you want to separate text from each other with a bit of vertical space.

      BONUS: Adding spaces with CSS

      Adding space characters through CSS (cascading style sheets) is not using pure, plain HTML elements, but it’s still relatively easy to remember. CSS has more to do with the formatting and styling of your HTML files, so it has more options to format your layout with spaces and indentation.

      Using text-indent

      As the name probably suggests, text-indent will indent your text based on the parameters you provide and often complements a paragraph tag (<p>). For instance, text-indent: 10px will indent your text by 10 pixels. Here is an example.

      Using margin and padding

      We have seen multiple ways for adding HTML spaces and formatting indentation using CSS as part of your html tags. CSS has another neat way to create inline, horizontal or vertical spacing, using margins and paddings.

      CSS margin will typically be used in order to add space between two div html elements. If you are looking to create a 10px space from the left and 20px from the bottom of your element, then you need a margin-left: 10px and a margin-bottom: 20px applied to your first div. Here is an example:

      Similarly, CSS padding will typically be used in order to add space within an element’s area or border. Here an illustration of the above example when using paddings:

      A final word of wisdom

      There are several ways to add spaces in your HTML. As a conclusion, keep in mind that there is a clear boundary between HTML and CSS, where HTML is used for the content, while CSS for the formatting and layout of our webpages.

      >