18

Good: paragraph p2 follows:

  • Item 1. Block below nicely separated from this text:

    block

    p2

  • item 2

Code:

-   Item 1. Block below nicely separated from this text:

        block

    p2

-   item 2

Bad: removed p2 from above:

  • Item 1. Block below is too close to this text:

    block

  • item 2

Code:

-   Item 1. Block below is too close to this text:

        block

-   item 2

I was too lazy to investigate the CSS further.

Tested on Firefox 46, Ubuntu 15.10.

Not present on Android app 1.0.85.

Web archive for future generations.

1
  • 1
    I just came across this answer, and if there is inline code in the line before the code block, it looks extra horrible as the grey backgrounds touch: screenshot Commented Apr 28, 2016 at 22:44

3 Answers 3

Reset to default
3

As vol7ron mentions, there is a p:last-of-type rule that's zeroing out the margin on any p that's the last within its parent in the context of a ul, ol, for whatever reason:

.post-text ul p:last-of-type, .wmd-preview ul p:last-of-type, .post-text ol p:last-of-type, .wmd-preview ol p:last-of-type {
    margin-bottom: 0;
}

One proposed fix is to just get rid of that rule altogether. It seems to have been put in place to prevent doubled vertical margins between the last p and its parent li, but CSS already has a mechanism for preventing that and it's called margin collapse. See my answer to this question on the main site (specifically, the last paragraph).

If the margins between the p and its parent li are not equal, and the rule was put in place to ensure the li margin always takes precedence even if it is smaller than that of p, the selector-list should be changed to:

.post-text ul > li > p:last-child, .wmd-preview ul > li > p:last-child, .post-text ol > li > p:last-child, .wmd-preview ol > li > p:last-child {
    margin-bottom: 0;
}

to prevent the rule from affecting

  1. p elements whose margins would not be collapsing with the li anyway, and
  2. other, completely unrelated p elements within the ul, ol.
0

Add a couple of <br>s at the end of item 1 to workaround.

Workaround:

  • Item 1. Block below is nicely separated from this text:

    block

  • item 2

Code

-   Item 1. Block below is nicely separated from this text:<br><br>

        block

-   item 2
-1

Looks Fine to Me

  • list

    code

  • list

    code

Too Much Space Using <br><br>

  • list 

    code

  • list 

    code

The culprit is more than likely this line in the CSS, which removes the bottom-margin spacing under certain paragraphs:

.post-text ul p:last-of-type, .wmd-preview ul p:last-of-type, .post-text ol p:last-of-type, .wmd-preview ol p:last-of-type {
    margin-bottom: 0;
}

It looks like every paragraph is being treated as last-of-type, so the CSS is probably not styling as it was intended.

6
  • But it didn't use to be that close, did it? It's too close to the text for my taste. It should always have the same distance as it has when there is a paragraph after the code block. Commented Apr 28, 2016 at 2:47
  • Yeah I think it was just like the second before, but all I'm saying is I'm not complaining :) I like the code being closer to the description. My preference would be a mixture of the two, about half the space of a line break. Commented Apr 28, 2016 at 2:55
  • 1
    @Benjamin This screenshot suggests that there used to be more space, which is also what I remember. Commented Apr 28, 2016 at 5:32
  • Also consider when list is inline code `list`. The gray areas touch one another. Commented Apr 28, 2016 at 5:58
  • Either they fixed it or this does not look like it happens on mobile Commented Apr 28, 2016 at 11:47
  • @vol7ron not present on android app, not fixed on Firefox. Added to question. Commented Apr 29, 2016 at 9:23

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.