Blockquote adds extra

Question

Why blockquote adds a extra br at the end of it and how can i avoid it? How can i remove that extra br that is added so all my lines are together>

.container-content .main-content .container-test pre {
  font-family: monospace;
  white-space: pre;
  word-break: break-all;
  color: #ececec;
  border: none;
  padding: 0;
  background-color: transparent;
}

blockquote {
  padding: 0px 10px 0px;
  margin: 0 0 0px;
  border-left: 3px solid #2471A3;
}

<div class="container-test">
<pre>
test test tesst
test test tesst
test test tesst
test test tesst
<blockquote>test test tesst
test test tesst
test test tesst
test test tesst</blockquote>
test test tesst
test test tesst
test test tesst
test test tesst
</pre>
</div>

gmpatzer · Answer 1 · 2018-01-07T21:16:55.420

The reason why you have an extra br after your blockquote is because you're using the <pre> tag. The pre tag formats the text exactly like how you write it in the code. So you have two solutions here

Format code like how you want it to look

.container-test {
  font-family: monospace;
}

blockquote {
  padding: 0px 10px 0px;
  margin: 0 0 0px;
  border-left: 3px solid #2471A3;
}

<div class="container-test">
<pre>
test test tesst
test test tesst
test test tesst
test test tesst
<blockquote>test test tesst
test test tesst
test test tesst
test test tesst</blockquote>test test tesst
test test tesst
test test tesst
test test tesst
</pre>
</div>

Avoid using pre entirely, and add a width to your container.

.container-test {
  font-family: monospace;
  width: 150px;
}

blockquote {
  padding: 0px 10px 0px;
  margin: 0 0 0px;
  border-left: 3px solid #2471A3;
}

<div class="container-test">
test test tesst
test test tesst
test test tesst
test test tesst
<blockquote>
test test tesst
test test tesst
test test tesst
test test tesst
</blockquote>
test test tesst
test test tesst
test test tesst
test test tesst
</div>

You can read more about the pre tag here.

This is more of a comment rather than an answer, (as it doesn't provide a fix) also external links are not a good idea — Ahmed Masud, Jan 07 '18 at 20:56
Errr if you read the whole paragraph links are encouraged as a reference to external material not as the source of the answer. If you provide a more complete description (with perhaps some code snippets in this case) of how pre behaves, and *then* say here is more information (also probably better to use w3c rather than a tutorial website as reference point) then it would be in the spirit of [so], meanwhile if you like we can discuss this on meta.stackoverflow.com — Ahmed Masud, Jan 07 '18 at 21:02

Kamil Naja · Answer 2 · 2018-01-07T21:10:27.927

-1

You can set

blockquote {
  /* your other styles */
  display: inline;
}

edited Jan 07 '18 at 21:10

answered Jan 07 '18 at 20:50

Kamil Naja

6,267
6
33
47

Ahmed Masud · Accepted Answer · 2018-01-07T20:58:20.520

-1

set the display property of blockquote (please use better selector) as inline-block.

 .container-test pre {
  font-family: monospace;
  white-space: pre;
  word-break: break-all;
}

.container-test pre blockquote {
  padding: 0px 10px 0px;
  margin: 0 0 0px;
  border-left: 3px solid #2471A3;
  display:inline-block;
}

<div class="container-test">
<pre>
test test tesst
test test tesst
test test tesst
test test tesst
<blockquote>test test tesst
test test tesst
test test tesst
test test tesst </blockquote>
test test tesst
test test tesst
test test tesst
test test tesst
</pre>
</div>

edited Jan 07 '18 at 20:58

answered Jan 07 '18 at 20:52

Ahmed Masud

21,655
3
33
58

@gmpatzer I wasn't asking you, I was asking whoever downvoted my answer :P – Ahmed Masud Jan 07 '18 at 21:03
3

I don't know why you were downvoted, but it is a good practice to add an explanation to your answer, not just *do this* or *try this*. Why is it showing the gap, and why changing it to `inline-block` fixes that? With a good explanation, your answer will be more useful to future readers and will likely attract more upvotes. – Racil Hilan Jan 07 '18 at 21:35

Blockquote adds extra

3 Answers3