Reduce Margin below Paragraph when Paragrah is followed by a List

[theRandomizer]

How do I reduce the margin that is present after a paragraph only when its followed by a list using CSS.
I am trying to get the list items to appear closer to the paragraph (by reducing margin) so that they look like a single block of text

[efemkay]

without the use of any plugin, i do the following to achieve similar effect (of para and ul within “same block”)

/* reduce margin below a para. default 1em */
p {
    margin-block-end: 0.2em;
} 
/* reduce margin above list (ul and ol). default 1em */
ul, ol {
    margin-top: 0.2em; 
}

• Note
  • if you have either p or ul, ol margin higher than the other, it will resort to the highest value
  • thanks to maturity of css (with collapsible margin and so on), this seems to work well and not affecting other blocks (like code block, quote block or headers).

[CawlinTeffid]

Use the Adjacent sibling combinator: p + ol, p + ul {margin-top: 0.2em;} means “set the top margin of ordered lists and unordered lists that immediately follow a paragraph to 0.2em”.

If you need to affect the bottom margin of the paragraph that immediately precedes a list, I think CSS doesn’t provide for that. You’d have to use a negative margin on top of the list.

[theRandomizer]

I had tried using Adjacent Sibling Contaminator but it does not seem to produce any difference for me in Reading Mode

[CawlinTeffid]

You might need to add specificity, like whatever class indicates reading mode markup or something. I’m sorry I can’t give specifics because I don’t know Obsidian’s markup and styles, but I believe there’s a guide to that stuff somewhere in the forum.

(I’m not trying to convince you to change your already-working solution, just providing fuller info.)

[efemkay]

your suggested combinator won’t work @CawlinTeffid. because obsidian put it as different block (see my screenshot below where <p> is in diff <div> than <ul>). However, if one uses Contextual Typography plugin (which i do in this screenshot, evident in classes el-p and el-ul) we can do combinator like below

.el-p + .el-ul ul { ... }

[CawlinTeffid]

Oh wow, I didn’t realize Obsidian’s markup was that annoying. I imagine without that plugin you might be able to select the divs based on the content of the data-tag-name attribute, assuming each divs wraps a single element (I don’t remember how, off the top of my head).