Basics of HTML: Learn How you can Create Blank Space in HTML

Hello folks, in this post we will help you learn how to create blank space in html. We will show you multiple ways to create html spaces or whitespaces in html through this post.

Adding spaces in html is not very challenging, any novice person can easily learn adding whitespaces or blank space in html. You can add regular spaces through space bar of your keyboard, no matter how many spaces you put, but the web browser will treat as only one space.

html space

1. Use   to create space

UsingĀ    makes it a non breaking space, as it prevents line breaking at its location. This option is to be used with caution as too much usage will make browser add spaces in a untidy way. It is used to force an extra space. It adds extra space between words. Let’s see through example below how you can add up   to add space in html. If you have to add spaces before, after, or in-between your text then you can use  .

spaces in html

Output:
Hello!! Dear

2. Use <pre> tag to add space

<pre> tag retain its line breaks and multiple spaces with indents if any given in the html. See in the example below how pre tag retains its indents and spaces.

html space with pre

Output:
Hi |Hello | How are you

3. Use Style Padding for space

On an html element you can add additional spacing spacing to the top, right, bottom, or left. Using style padding you can add up spaces anywhere you want. The blank spaces are padded using padding. Also, you should know the the difference between margin and padding before actually deciding the type of space you want to add around the element. For example let’s say you need to add up some space in left side of a string, you can add as shown below.

space with padding

Output:

space through padding

Help us Grow

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code