In this tutorial we will show you the solution of HTML space between lines, in HTML there are many ways with the help of which you are able to give space between lines in html. Most of times, everyone gives space in lines of any tag by leaving some space between two lines and with the help of break tag that is <br>.
But, this did not works properly. When you open the code in browser, then the space which you want is not there.
So, a problem occurs there. Hence, today we are here to show you how you are able to apply or give space between lines in html.
Step By Step Guide On HTML Space Between Lines :-
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 or with the help of <br>, but that’s not an appropriate way to do this. The most appropriate method to give space is by using line-height.
The line-height can be used in any tag, in which, the tag contains text and you want to give space in between lines.
<!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="line-height: normal;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis! </p> <p style="line-height: 40px;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis! </p> <p style="line-height: 18ch;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis! </p> <p style="line-height: 5px;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo praesentium culpa, ea ullam perferendis aspernatur maxime et nobis iste debitis! </p> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- 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.
- 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, in all we give line-height in style attribute.
- In all the line-height we give different values, you can use them according to your choice as how much space you want. You can understand the amount of space given, by customizing the value of properties.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, here we specify the most used method in html that are used to give space in html in between lines. I hope this tutorial on HTML space between lines helps you.
About Pragati
