All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Horizontal Space In HTML

Last Updated : Mar 11, 2024

Horizontal Space In HTML

In this tutorial we will show you the solution of horizontal space in HTML, in HTML today our topic is about how to give horizontal space in html.

There are many ways with the help of which you are able to give horizontal space in html. Mostly, when you want to give space in any tag. By mostly space is given by leaving a margin between words.

But, this did not works properly. When you open the code in browser, then a little space is showed there.

Whereas the custom space gets consumed. So, today our topic is about that how we are able to give horizontal space in html.

Step By Step Guide On Horizontal Space In HTML :-

As, we already say that there are many ways with the help of which you are able to give space. The most used methods by beginners is by using pre tag, but that’s not an appropriate way to give space.

There are mostly two methods that are used that are &nbsp and word spacing method. These are two ways which are used for horizontal space by professional point of view.

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
<p style="word-spacing: normal;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis!
    </p>
    <br><br>
    <p style="word-spacing: 50px;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis!
    </p>
    <br><br>
    <p style="word-spacing: 20ch;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis!
    </p>
<p>
             this is space          you can use        this for less        space
    </p>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, we create four paragraphs, first three with style word-spacing. In all the word-spacing we give different values, you can use them according to your choice. As how much space you want.
  5. And in last paragraph, we use &nbsp property of html, it is used to give a little space, in between, left or right side of text. You can use this attribute anywhere you want.
  6. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last, here we specify the two most use methods in html that are used to give space in html.

These attributes are only used to give space between words, in next sessions, we will also tell you that how you are able to give space between alphabets of a word also. I hope this tutorial on horizontal space in HTML helps you.

Author Image About Ashish

Ashish is a dynamic and motivated individual with a passion of programming and an experienced programmer having 3+ years of experience in various languages like Java, Python, HTML, CSS, JavaScript, jQuery and various frameworks like Bootstrap

Follow Ashish On Linkedin 🡪