Reduce Margin below Paragraph when Paragrah is followed by a List

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

1 Like

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).

1 Like

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.

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

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.)

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 { ... }

image

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).

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.