How to increase line height With CSS

Tutorial by:
Team Zdidit

Reviewed by:
On November 7, 2015
Last modified:January 21, 2016


There are times when we want to increase line height to make it more eye catching, this helps in increasing viewership experience. Learn How to increase line height using CSS on your WordPress website easily.

There are times when we like to make changes to our website and one of the main area is the content area. After all every one is coming to your website just for that.

Text can be more appealing to viewers with right size and space between two lines. This space between two lines is what we call line height.

Line height of your website text is defined in the CSS file of the theme that is currently active on your website.

Even though theme creator have defined the line height, but it’s not necessary that you will like that too. This can be due to many reasons, for instance when we change the font type all the look of the text changes, so does beauty of old line height.

Now with the new font you have to adjust the line height to suit your blog design.


How to Increase Line Height With CSS

Now to increase Line height with CSS on WordPress.

First you have to go Dashboard»Appearance»Editor you can even do that with Ftp client. Now you have to find .post p in your css file. Now you have to change or add some code to it.

This .post p is the code which controls the paragraph of the post. You just have to find this and make changes to the code, if you are not ableo tofind it then you can even create this code and add the bellow code to it.

.post p{
line-height: 1.5em;

This 1.5em is 1.5 times the default line height, You can change the number depending on the line height you want have between two lines 1em is the default height that came with your theme and you can increase it to 1.2, 1.8, 2.5 or any thing you like.

After editing the code you should save it, if you are using FTP then after saving you have to upload the file to the server.

Now you are done with this you can now see the results by visiting your website. You can make adjustment by changing the em value.

This is an easy way by which you can change the line height.

If you likes this post then there are more tutorials that you might be interested in. You can visit our tutorial section to learn more things about making your WordPress website better.

Further Read:

If you liked the post then please share it, and to ask a question or for starting a conversation use the comment section below.

You can follow us on twitter, facebook, Google+

Team Zdidit

Team Zdidit take care of all the content creation for zdidit. This team is supervised by Achin Verma

You may also like...

Leave a Reply

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