Skip to content

Commit 343921b

Browse files
committed
fix: eliminate double margin in fieldsets and p-wrapped form inputs
- Add fieldset > :last-child margin-bottom: 0 (matching article/details pattern) - Use :nth-last-child(of :not(datalist, script, style)) to skip invisible elements - Kill input/select/textarea margin when last visible child of <p> or <div> to prevent stacking with the parent's own margin-bottom
1 parent f7e12da commit 343921b

1 file changed

Lines changed: 13 additions & 0 deletions

File tree

src/_forms.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,12 @@
3131
margin-bottom: var(#{$prefix}spacing);
3232
}
3333

34+
// When an input is the last visible child of a block that already has
35+
// margin-bottom (e.g. <p>), kill the input's margin to avoid doubling.
36+
:where(p, div) > :where(input, select, textarea):nth-last-child(1 of :not(datalist, script, style)) {
37+
margin-bottom: 0;
38+
}
39+
3440
// ----- Focus -----
3541

3642
:where(input, select, textarea):focus-visible {
@@ -95,6 +101,13 @@
95101
max-width: 100%;
96102
}
97103

104+
// Kill last-child bottom margin so it doesn't stack with fieldset padding.
105+
// Uses :nth-last-child(of ...) to skip invisible elements (datalist, script).
106+
:where(fieldset) > :nth-last-child(1 of :not(datalist, script, style)),
107+
:where(fieldset) > :nth-last-child(1 of :not(datalist, script, style)) > :nth-last-child(1 of :not(datalist, script, style)) {
108+
margin-bottom: 0;
109+
}
110+
98111
:where(legend) {
99112
font-weight: 600;
100113
padding-inline: 0.25em;

0 commit comments

Comments
 (0)