HTML – Space between lines and paragraphs

March 22, 2023
DD Planet

Line spacing is very important in the text that appears in the articles or otherwise on the website. We generally don’t care about it as the default option may appear okay to us. However, experimenting a little may improve the outlook.

Here are the tips on how to achieve the desired line spacing using CSS in html:

1. The attribute that has to be changed is ‘line-height’
2. Line-height can be specified individually at any style level, font level or any other element level, for example, one may specify .style12 with font Arial and then keep line-height for this style as 1.5
3. Line-height can be specified generally at the paragraph level, for example:
   P {line-height: 1.5;}
4. If line-height is specified at the paragraph level, all the text that appears under the 'p' element shall have the defined line spacing
5. You must choose the line-height which is relevant to the font style and the font size you have chosen
6. Once line-height is implemented at the paragraph level, the need to specify the ‘br’ tag reduces drastically and we achieve uniformity in the text
7. To achieve spacing between two or more paragraphs, margin-top and margin-bottom can also be specified for the ‘p’ tag in the CSS, for example,
   p {margin-top: 1.5rem; margin-bottom:1.5rem;}