{"id":23316,"date":"2021-04-26T17:00:47","date_gmt":"2021-04-26T15:00:47","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=23316"},"modified":"2021-04-26T15:07:45","modified_gmt":"2021-04-26T13:07:45","slug":"how-to-add-line-break-o-single-line-spacing-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-line-break-o-single-line-spacing-in-wordpress\/","title":{"rendered":"How to Add a Line Break or Single Line Spacing in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\"><p>[vc_row][vc_column][vc_column_text]Your visitors come to your website for your content, that much is a given. But there are many factors which affect the visitors\u2019 impression of your website, and one of them is how your content looks. WordPress\u2019s default editor, Gutenberg, had introduced some novelties in terms of text formatting, but <strong>adding a line break<\/strong> at the click of a button is not among them. This doesn\u2019t mean that there is no way to <strong>generate a line break in WordPress<\/strong>. In fact, there are several, and we will go through them in this tutorial.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There is a thing you should bear in mind: a lot of the look of your website text is dependent on the theme you are using. Whether you are trying to <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-change-text-color\/\">change your text color<\/a>, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-change-font-size-in-wordpress\/\">increase or decrease font sizes<\/a>, or introduce a line break or line spacing, you may find that the theme is hindering you, or that some of the solutions we will offer you do not work equally for all themes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we will be discussing:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-a-line-break-between-paragraph-blocks\">How to Add a Line Break Between Paragraph Blocks<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#avoid-creating-a-paragraph-block-when-typing-in-gutenberg\">How to Avoid Creating a Paragraph Block When Typing in Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#change-paragraph-spacing-using-css\">How to Change Paragraph Spacing Using CSS<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-a-line-break-between-paragraph-blocks\"><\/a>How to Add a Line Break Between Paragraph Blocks<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you are using a word processor (or the <strong>Classic<\/strong> WordPress editor), you can typically use the <strong>Enter<\/strong> key on your keyboard when you want to introduce a new line. In Gutenberg, the same key will just generate a new paragraph block. If you want to add a blank line between two paragraphs, your theme will likely already be configured that way. Most themes have a blank space between paragraphs by default.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will begin with a simple text post, populated by some randomly generated text. To create a line break, simply select the place where you want to end the top paragraph.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Text-1.jpg\" class=\"attachment-full size-full\" alt=\"Select Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Text-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Text-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Text-1-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Select-Text-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have done that, hit <strong>Enter<\/strong>. You will have generated a new paragraph block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Press-Enter.jpg\" class=\"attachment-full size-full\" alt=\"Press Enter\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Press-Enter.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Press-Enter-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Press-Enter-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Press-Enter-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A theme will typically interpret this automatically. In the live version of your post, you can see a line break between the paragraphs.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The same works for <strong>Elementor<\/strong> when typing in the Text Editor element\u2019s text field.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"632\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Enter Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Elementor-300x196.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Elementor-768x501.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Elementor-620x404.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"avoid-creating-a-paragraph-block-when-typing-in-gutenberg\"><\/a>How to Avoid Creating a Paragraph Block When Typing in Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]You may, for whatever reason, want to begin writing in a new line without a line break. You can do that by placing the cursor to where you want your top line to end and hitting <strong>Shift + Enter<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter.jpg\" class=\"attachment-full size-full\" alt=\"Shift Enter\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will find that the text after your cursor begins in the next row, but forms part of the same block.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"444\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Shift Enter Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter-Preview-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter-Preview-768x352.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shift-Enter-Preview-620x284.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Again, the <strong>Shift + Enter<\/strong> command works the same in <strong>Elementor<\/strong>\u2019s Text Editor element.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"change-paragraph-spacing-using-css\"><\/a>How to Change Line And Paragraph Spacing Using CSS<\/h2>\n<p>[\/vc_column_text][vc_column_text]CSS, or cascading style sheets, is the part of your theme\u2019s code which governs the way your text looks, among other things. If you want to manipulate your theme\u2019s default options, you will need to add some custom CSS to your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The value we will be using here is the <em>em<\/em>. In typography, em originally meant the width of the capital M for any given typeface, and that\u2019s where we get the extra wide em dash (\u2014) from.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In order to add CSS code to your theme, you need to access your theme customizer. Navigate to it from the left-hand side menu on your WordPress dashboard: it\u2019s at <strong>Appearance\/Customize<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, click the <strong>Additional CSS<\/strong> bar in the left-hand side menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"515\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Additional-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Additional-CSS-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Additional-CSS-768x408.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Additional-CSS-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to change the line spacing, the code you need to enter is<em> p{line-height: Xem;}<\/em>, where X is the number of ems you want to reserve for each line. See how the line spacing changes if we switch our line height to 3 ems.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"550\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Code.jpg\" class=\"attachment-full size-full\" alt=\"Enter Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Code-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Code-768x436.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Enter-Code-620x352.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"581\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Line-Height.jpg\" class=\"attachment-full size-full\" alt=\"Line Height\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Line-Height.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Line-Height-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Line-Height-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Line-Height-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, in order to change paragraph spacing (the space between paragraph blocks), you need a different piece of code. Use <em>p {padding-bottom: Yem;}<\/em>, where Y is the number of ems you want between paragraphs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can, of course, use either or both to style your website\u2019s text however you like it. You can also replace <em>em<\/em> with <em>px<\/em> in your code if you want to enter values in pixels.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we have shown, you can tweak your line spacing and paragraph spacing in WordPress pretty much however you like, provided it meshes well with your theme. You can do it irrespective of the editor you are using, and in no time at all, for a single paragraph or all of them across your website. Bear in mind, though, that not all settings will work for all colour palettes and text layouts. It\u2019s up to you to make sure your text formatting settings make your text as legible as you can for your visitors.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Posting on a website in WordPress? Line breaks troubling you? Our handy how-to is here to help you out!<\/p>\n","protected":false},"author":16990,"featured_media":23391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-23316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=23316"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23316\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/23391"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=23316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=23316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=23316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}