Remove margin-bottom on last child

[pietz]

Please search for duplicate or closed issues first.

Describe the issue

PicoCSS uses margin-bottom on many elements to create spacing to the next element. This makes sense, but you probably want to remove it from the last child within a div to not create trailing white space that might stack over multiple layers.

Current Behavior

For example, if you create a form in a card that ends with a button:

<article>
    <input type="text" />
    <input type="text" />
    <input type="submit" />
</article>

The input fields introduce a margin-bottom to create spacing to the next element. Makes sense.

However, the button also adds a margin-bottom which doesn't help with anything. It just makes the card look unbalanced because there's more room at the end than in the beginning.

To make things worse, this problem usually stacks if you have a form within a card, within a column, within a grid, within a container. It just creates a lot of trailing white space that's not needed and doesn't look good.

Expected Behavior

I think this is what it should look like:

I created a workaround where I manually add "margin:0" to the last element but I think it should be solved within PicoCSS.

Environment

Example: MacOS, Firefox, PicoCSS 2.0.6

[harith-hacky03]

I am eager to work on it. Can you please assign me?

[coezbek]

Workaround if your last element is the last child:

/* Remove margin-bottom from last button in a form */
[type=submit],
[type=reset],
[type=button] {
  &:last-child {
    margin-bottom: 0px;
  }

  /* Also remove if next input after button is a hidden input */
  &:has(+ [type=hidden]) {
    margin-bottom: 0px;
  }
}