User:SapadorCastelo/Sandbox

This is a block element with no margins. 1st paragraph | margin-top: 0px; margin-bottom: 24px; – This page is used to test the margins of paragraphs on FandomDesktop. It is only valid as long as the margins defined on the current CSS are not modified by Fandom. Once the margins have been modified by Fandom staff, this test may appear as broken or misleading. This is a paragraph that is not followed by another paragraph. It could be the first element of the article. In this case it is the second, just under a block element (a div) that has no margins at all. This paragraph has no margin on top, and because of that it appears attached to the box above it. It has 24 pixels of margin on bottom, which is used to separate it from any kind of element. In this case it's another paragraph.

Paragraph under another paragraph | margin-top: 24px; margin-bottom: 24px; – This is a paragraph that has another paragraph just above it. Unlike the previous one, this paragraph comes with a top margin or 24 pixels. It seems to be redundant, because all paragraphs come with a margin of 24 pixels below them, which already set them apart. The Table of Contents below has a margin-top of 24 pixels, which seems to be redundant as well, at least in this case. When margins like these are set, they overlap, and only the bigger one is considered by the browser. If they are even, only the value of one of them is taken into account.

H2 Heading
Paragraph under an H2 heading | margin-top: 0px; margin-bottom: 24px; – This is a common paragraph under an H2 heading. It has no margin on top. However, it doesn't appear to be attached to the heading because all H2 headings have a padding-bottom of 6 pixels, a border-bottom of 1 pixel, and a margin-bottom of 9 pixels.

H2 Heading + image
Paragraph under H2 heading and image | margin-top: 0px; margin-bottom: 24px; – This is a common paragraph that comes after (in the code) an image that is under an H2 heading, and is floating to the right. Both paragraph and image have no margin on top. However, they don't appear to be attached to the heading for the same reasons explained on the previous paragraph.

H3 Heading
Paragraph under an H3 heading | margin-top: 0px; margin-bottom: 24px; – This is a common paragraph under an H3 heading. It has no margin on top. However, it doesn't appear to be attached to the heading because all H2 headings have a margin-bottom of 12 pixels.

H4 Heading
Paragraph under an H4 heading | margin-top: 0px; margin-bottom: 24px; – This is a common paragraph under an H3 heading. It has no margin on top. However, it doesn't appear to be attached to the heading because all H2 headings have a margin-bottom of 9 pixels. As you can see, the gap between headings and the paragraph just below them is smaller than those used to separate any paragraph from the element below it. This creates a positive impression that the headings closer to the content they are introducing.

Other block elements
1st paragraph | margin-top: 0px; margin-bottom: 24px; – This is a common paragraph with a list under it. The gap separating this paragraph from the list below it is caused by the margin-bottom of 24 pixels present in all paragraphs. [ #List ]


 * List between 2 paragraphs
 * margin-top: 6px; (redundant/ignored)
 * margin-bottom: 18px;

Paragraph between 2 lists | margin-top: 0px; margin-bottom: 24px; – This is a common paragraph between two lists. Any paragraph just below a list of items can be used to comment and add further details about the preceding list. However, much more common than that, is that any paragraph just above a list of items is frequently used to introduce or explain the following list. Despite that, as you can see, this paragraph is closer to the list above it (18 pixels), than it is to the list below it (24 pixels).


 * simple unordered list between 2 paragraphs
 * list item
 * list item

This issue is even more evident when we have several small lists preceded by a regular text on  bold .

Characters


 * main character
 * NPC 1
 * NPC 1
 * NPC 1

Weapons
 * sword
 * axe
 * bow

Special abilities
 * 1) ability 1
 * 2) ability 2
 * 3) OP ability

[ #Table ] Note that this situation happens with all type of block elements.

[ #Image ] The paragraph is always closer to the element above it.



[ #Pre ] If the element is a heading, as shown on the first sections of this page, this makes sense. But for elements like tables, images, and more important, lists, the current margins doesn't seem to be the best.

Box with preformatted text No margins at all.

[ #Modded ] Ideally, the each block element should be displayed with an even (or smaller) gap between them and their respective introductory text. The elements below are using inline style to override the standard style provided by Fandom.

Characters
 * main character
 * NPC 1
 * NPC 1
 * NPC 1

Weapons
 * sword
 * axe
 * bow

Special abilities
 * 1) ability 1
 * 2) ability 2
 * 3) OP ability

Don't they look better like this? One problem that could arise with these types of margins (if they were set to be standard) is that they create just the same problem for editors that use a paragraph to comment the block above it. A way to possibly improve the current behavior, would be changing the margins in order to produce even gaps, above and below all paragraphs, when they are interacting with block elements.