CODEWITHSUNDEEP
html
Badal Singh
Badal Singh

Reputation: 479

How to define space of blank lines in html

I want to know do i define or adjust the blank line spaces created while using the pre tag in html

All the codes and screenshot is attached for better understanding

Hopefully someone will know a fix for it Thank you in advance

Html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Blank line's Space Adjustment</title>
</head>
<body>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Sed ac quam varius, ullamcorper massa in, pharetra<br>augue.Etiam quis ultrices nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Sed ac quam varius, ullamcorper massa in, pharetra<br>augue.Etiam quis ultrices nulla.
</pre>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

pre {
  line-height: 1.5em;
  font-size: 3.90vw;
  font-family: 'Quicksand', sans-serif;
}

Image Showing what i exactly want

Upvotes: 3

Views: 6395

Answers (4)

liakoyras
liakoyras

Reputation: 1185

You seem to want something like a paragraph spacing property, however I don't think there is one.
There are many different ways to do this without using <pre>, however, if you insist on doing so, one way to do this is to remove entirely your blank row, then use line-height and then use margin to hide the space before and after your rows.
Your wanted white space in between the lines would be almost equal to the line-height minus the font-size/2

.text-after-pre {
  margin-top: 5px;
}
pre {
  margin-top: -25px;
  margin-bottom: -25px;
  line-height: 50px;
}
<pre>
This is line 1 
This is line 2 
</pre>
<div class="text-after-pre">Some more text</div>

Upvotes: 0

ANIK ISLAM SHOJIB
ANIK ISLAM SHOJIB

Reputation: 3258

this is how it is done

 <pre>This is line 1 </br></br>This is line 2</pre>
 

 
<pre>This is line 1


 &nbsp;&nbsp;This is line 2</pre>

Upvotes: 1

waleed ali
waleed ali

Reputation: 1195

I think, one way you can adjust the space between two line spaces is using a <br element with its line-height property.

.line-break {
  line-height: 22px;
}
<pre>
This is line 1 
<br class="line-break">
This is line 2 
</pre>

Upvotes: 0

Himali Patel
Himali Patel

Reputation: 118

HTML is space insensitive i.e it will ignore the 10–20 spaces you made and would consider only 2.

As far as I have seen, the multiple tags used for spacing in HTML are:-

1.) <br/>- this one is for the line breaks i.e. to jump onto the next line.

2.) &nbsp; - it’s a non-breaking space and you can use it in multiples like     and so on.

3.) &emsp; - it’s also non-breaking space but provide space equal to four normal spaces.

3.) <pre></pre> - this could be used when you want to display your content as it is typed. You could use this to display code examples, poetry, or any other text in which exact spacing and line breaks are important.

4.) p.indent{ padding-left: 1.8em } - in style tag in head it will add blank space "padding" to the left of the paragraphs. And in body, <p class=”indent”>your content</p>.

However, the main downside to formatted text using <pre> is the width. Unlike normal HTML, it will not resize to match the user's window size but will create a horizontal scroll bar.

Upvotes: 2

Related Questions