CODEWITHSUNDEEP
htmlcssquartoreveal.js
agila
agila

Reputation: 3472

Increase padding just for one list in quarto/revealjs presentation

I just started learning how to use quarto/revealjs to prepare presentations and I was wondering how I can define a .css file to modify the padding between list elements, but only for one list (instead of the complete qmd document).

For example, I know that if I consider the following CSS text

.reveal li {
  padding: 25px; 
}

save it in a style.css file, and include it in the following qmd document

---
format: 
  revealjs: 
    css: style.css
---

## Bullets

Increase padding for the elements of this list

- A
- B

but not for this list

- C
- D

then I can increase the spacing between the list items for the whole document:

output of previous code chunk

However, I would like to modify just one list. Is that possible?

Upvotes: 1

Views: 763

Answers (1)

SamR
SamR

Reputation: 20395

We can create an extrapad class, setting margin-bottom for each list item except the last. We can add the !important override to ensure that it applies rather than the default reveal.js CSS list rule.

.extrapad li:not(:last-child) {
    margin-bottom:60px  !important;
}

Then use the Pandoc fenced div notation to apply this to the relevant list in your qmd file:

---
format: 
  revealjs: 
    css: styles.css
---

## Bullets

Increase padding for the elements of this list

:::{.extrapad}
- A 
- Lorem ipsum dolor sit amet, class maecenas eros dictum enim pharetra curabitur, sed sed. Morbi et, accumsan
- B
:::

but not for this list

- C
- D

Output:

enter image description here

margin-bottom applies to space between elements in the list, unlike line-height which would also create space between lines.

See also:

Upvotes: 2

Related Questions