[csswg-drafts] [css-lists] Property to control the spacing (gap) between list-items (#11985)

glmvc has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-lists] Property to control the spacing (gap) between list-items ==
Currently, there is *no dedicated* property for controlling the **spacing between list items** (`<li>`) in ordered (`<ol>`) and unordered (`<ul>`) lists in the standard block layout.  
As a result, authors typically have to rely on other properties or layout modules—such as `margin` or `display: grid`/`flex` with `gap`—which requires additional selectors and rules, and can lead to inconsistencies, especially with nested lists and sibling elements of lists.

Unlike tables, for example, which have a dedicated `border-spacing` property, and layout models like flexbox and grid, which support `gap`, **lists lack a native spacing mechanism**—even though list items use a distinct display type `list-item` for the inline box, which sets them apart from regular block elements.

IMHO, adding a **`(list-)gap` property** for list elements would allow authors to apply *consistent* spacing between list items—even in nested list structures using **inheritance**—without having to switch layout models or write extensive selectors and rules. It could also **support logical directions** (vertical or horizontal), enabling proper behavior in different writing-mode contexts.

```css
:is(ul, ol) {
  list-gap: 1em;
}
```

---

Here are some **examples of solutions** that authors have come up with to create consistent spacing between list-items, including nested lists:

```css
/*
works visually for non-breaking, single-line text content
often seen, but not recommended for this task
*/

:is(ul, ol) {
  line-height: 2;
}

/*------------------------------*/

li {
  line-height: 2;
}
```

```css
/*
simply using block-margin or block-padding
affects block spacing to sibling elements of the list
*/

li {
  margin-block: 1em;
}

/*------------------------------*/

li {
  padding-block: 1em;
}

```

```css
/*
changing the display and layout to flex or grid to make use of the gap property
does not take spacing for nested lists into account
*/

:is(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/*------------------------------*/

:is(ul, ol) {
  display: grid;
  gap: 1em;
}
```

```css
/*
efforts to prevent margin collapsing and unwanted spacing to sibling elements of the list at the block-start or block-end
does not take spacing for nested lists into account
*/

li {
  margin-block-start: 1em;
}
    
li:first-of-type {
  margin-block-start: 0;
}

/*------------------------------*/

li {
  margin-block-end: 1em;
}
    
li:last-of-type {
  margin-block-end: 0;
}

/*------------------------------*/

li:not(:first-of-type) {
  margin-block-start: 1em;
}

/*------------------------------*/

li:not(:last-of-type) {
  margin-block-end: 1em;
}

/*------------------------------*/

li + li {
  margin-block-start: 1em;
}
```

```css
/*
efforts to create uniform spacing for nested and sibling lists
making use of modern css selectors for this task
*/

li:not(:last-of-type) {
  margin-block-end: 1em;
}

:is(ul, ol) + :is(ul, ol),
li :is(ul, ol) {
  margin-block-start: 1em;
}
```

---

> This is my first time contributing to this repository. I read the contributing guidelines and searched for existing issues, but couldn't find any discussion on this topic. I apologize in advance if I've missed anything.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11985 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 22 March 2025 12:35:18 UTC