Add a blank line in html
How do you insert a blank line into HTML? Several ways are possible, with each unique approach depending on your specific use case and what is permissible for you to edit with the HTML. Show
Reasons for why you might need to insert blank lines into your HTML code could be to render it in a PDF. One recent case for myself with a project was having an area at the bottom of a letter where somebody could sign. This might be useful for example when uploading the document to Adobe Sign and having it signed by a couple of parties. Whatever the reason or use case needed for inserting a blank line into your code, here are several means available for you to use. I’ve broken up each section according to what is needed to be changed and these are as follows:
Let’s look at each approach in more detail. Use HTML TagsThere are three tags which are available to help insert blank lines into your code. These three tags are known as the break tag, pre-formatted tag and paragraph tags. Let’s look at each in a little more detail. Using BR TagsIf you’re stuck with the parent nodes that wrap your text, then one solution you can use is to append a HTML tag to include a blank line
by inserting the If a BR tag contains a forward-slash it helps the reader of the code to know the tag is self-closing. In other words, it doesn’t need a corresponding closing If you happen to write your Personally, I prefer
inserting the forward-slash purely for readability, I can quickly see from the code that the By inserting the Here’s an example of what the code would look like using
Be careful with using the line break tag into your HTML code. You might want to check my other post on inserting line breaks in HTML about the purpose of a line break. Using PRE TagsIf you can modify the parent node wrapping the area where you want your blank lines to go, then this option may provide the most flexibility without needing to insert any additional tags. The only issue with using the To insert a blank line using the Here is an example
using
Yours sincerely, Ryan As you can see from the above example, very little is needed in the code to change. However, it does mean the Also, you may have to add a space or two on those blank lines otherwise it may be rendered as a mistake and the blank lines may be removed. Using P TagsAnother way to add a blank line using HTML tags is to use the standard paragraph If structure of your content is important and elements need to be wrapped in paragraph tags you can add a blank line by just inserting an empty paragraph section, like so:
Yours sincerely, Ryan Now you’ll notice in the above output that WordPress hasn’t rendered the blank paragraph (the Therefore, to force the blank line enter something between the paragraph tags something like a space character, or the HTML entity for the non-breaking space
Yours sincerely, Ryan As you can see from the above HTML output, WordPress doesn’t deem the middle paragraph to be an oopsie and therefore renders the middle paragraph, showing an empty blank line. Using HTML Entity / Character ReferencesAnother way of creating a blank line in your HTML output is to use HTML entities. I’ve already demonstrated one HTML entity above with the non-breaking space character An HTML entity is a representation of an ASCII character and is annotated by writing them with an ampersand followed by an abbreviation, like For example, the non-breaking space character can be written as an abbreviated entity reference like Since ISO-8859-1 defined the character set for the HTML 4.01 standard. Within the first 32 characters (from 0 to 31) are the control characters, several of which define a line break. Using Carriage Return Character ReferenceThe HTML character reference for the carriage return character is
Yours sincerely, Ryan If nothing was rendered it is likely the operating system isn’t interpreting this as it should. Try the next one… Using Line Feed Character ReferenceAnother HTML character available is the Line Feed character, which has the symbol ` ` and this operates in the same way as the carriage return, as seen in the following example:
Yours sincerely, Ryan This seems to render fine on my mac OS machine, but if you’re using Windows or on a mobile device one or the other may not work. Therefore, it might be best to combine both into something like this:
Yours sincerely, Ryan I’ve inserted the carriage return character first as some Windows machines prefer this order: carriage return then line feed. Anyway, try the above HTML character references in your code if this is an option that appeals to you. Using CSSAll of the above examples require the insertion of additional code, whether that be direct HTML or an ASCII character. What if there is no ability to insert additional data? Is there a means using CSS to have blank lines? Using white-space CSS PropertyOne means is to use the There are several options available for this type, but the one I’m most interested in if my text is fixed and I want to output this result according to its output is the option Here is an example demonstrating this use (I’ve inserted the
Yours sincerely, Ryan Using margin or paddingIf the structure of your code is wrapped in tags for each line, then you might want to look at setting a larger spacing underneath the first line (or a larger spacing above the second line). A CSS property that can easily allow for this functionality is the Here is an example demonstrating the use of
Yours sincerely, Ryan Again this solution best suits when you can’t inject the blank paragraph into the HTML as mentioned above, and each section is wrapped in its own HTML tag. You may also need to force SummaryThere are several ways to insert a blank line into your HTML code. Some methods depend on what you can inject (if anything at all), whereas other means can use the CSS to help provide the necessary spacing. Which tag is used to create a blank line in HTML?The
HTML element produces a line break in text (carriage-return). How do you add a blank line in CSS?How to add a line-break using CSS. Set the content property to "\a" (the new-line character).. Set the white-space property to pre . This way, the browser will read every white-space, in myClass , as a white-space.. How do you draw a line in HTML?Its simple to add a horizontal line in your markup, just add:
. Browsers draw a line across the entire width of the container, which can be the entire body or a child element. |