618033 - Not enough margin after block-level elements

Status: VERIFIED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P1)

Description

[James Socol [:jsocol, :james]]

I noticed that to get the appropriate amount of white space after a block-level element, it's necessary to use two blank lines, which causes the parser to render an extra <br> tag at the start of the next paragraph:

<literal>
 this is a pre section

this is a new paragraph
</literal>

turns into

<literal>
<pre>this is a pre section</pre>

<p>this is a new paragraph</p>
</literal>

which is correct, but the <p> comes up to the bottom edge of the <pre>. To make it look right, you have to do:

<literal>
 this is a pre section


this is a new paragraph
</literal>

which turns into

<literal>
<pre>this is a pre section</pre>

<p><br>
this is a new paragraph</p>
</literal>

which looks right but is wrong.

Solution to this: margin-top on <p> tags within the articles?

Raises another question: why is it generating <br> tags at all, ever?

Comment 1

[Erik Rose [:erik][:erikrose]]

Let's put some more margin-bottom on {warning}s, too, like at https://support.mozilla.com/en-US/kb/The%20bookmarks%20and%20history%20system%20will%20not%20be%20functional. Also check {notes} and whatever other block-level special things we have.

Comment 2

[Thomas Schwecherl]

margin-bottom is also needed after lists like after "* For more information on Firefox profiles, see the [[Profiles]] article." at the beginning of https://support.mozilla.com/en-US/kb/Firefox%20is%20already%20running%20but%20is%20not%20responding

Before and after notes there should be also margins (example at same page). It shouldn't be necessary to insert line breaks for that (WYSIWYG breaks or <br/>).

This visual bugs should have priority because now localizers will use "hard coded" line breaks to correct the false behavior of SUMO - so after fixing this bug, these self-formatted pages will have too large margins.

Comment 3

[James Socol [:jsocol, :james]]

(In reply to comment #1)
> Let's put some more margin-bottom on {warning}s, too,

(In reply to comment #2)
> margin-bottom is also needed after lists like after

> Before and after notes there should be also margins

Yeah, it's pretty much all block-level elements in the KB.

> This visual bugs should have priority

It will be fixed in 2.5.

Comment 4

[James Socol [:jsocol, :james]]

https://github.com/jsocol/kitsune/commit/e6663469

Setting p { margin: 1em 0; } fixed 99% of cases, but there were some weird things around lists, especially content inside list items, and block-level siblings that weren't <p>. The vast majority of these should be cleaned up now.

Comment 5

[Rebecca Billings [:rbillings]]

Verified spacing on pre sections, warnings, lists, notes, etc.