Skip to content

Instantly share code, notes, and snippets.

@csswizardry

csswizardry/margins-and-paddings.md

Last active October 3, 2025 03:07
Show Gist options
  • Save csswizardry/442de89c46f7ca7389a4afbcd155a2dd to your computer and use it in GitHub Desktop.
Save csswizardry/442de89c46f7ca7389a4afbcd155a2dd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csswizardry revised this gist Aug 29, 2025. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions margins-and-paddings.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,32 +6,32 @@ that would need a `margin` or `padding` removing in a reset stylesheet:

    | Element | Chrome | Chrome for Android | Edge | Firefox | Firefox for Android | Safari | Safari for iOS |
    |-------------|:------:|:------------------:|:----:|:-------:|:-------------------:|:------:|:--------------:|
    | `blockquote`| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `body` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `button` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dd` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dialog` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dl` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `fieldset` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `figure` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h1` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h2` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h3` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h4` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h5` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h6` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `hr` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `input` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `legend` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ol` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | ✘ | ✘ |
    | `p` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `hr` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `blockquote`| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `pre` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `select` | ✘ | ✘ | ✘ | ✔ | ✔ | ✘ | ✔ |
    | `figure` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ul` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ol` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dl` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dd` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `th` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `td` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `fieldset` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `legend` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `input` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `textarea` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `th` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ul` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `button` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dialog` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | ✘ | ✘ |
    | `select` | ✘ | ✘ | ✘ | ✔ | ✔ | ✘ | ✔ |

    This means you’d need the following in your reset:

  2. csswizardry revised this gist Aug 29, 2025. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions margins-and-paddings.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,32 +6,32 @@ that would need a `margin` or `padding` removing in a reset stylesheet:

    | Element | Chrome | Chrome for Android | Edge | Firefox | Firefox for Android | Safari | Safari for iOS |
    |-------------|:------:|:------------------:|:----:|:-------:|:-------------------:|:------:|:--------------:|
    | `blockquote`| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `body` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `button` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dd` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dialog` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dl` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `fieldset` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `figure` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h1` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h2` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h3` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h4` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h5` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h6` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `p` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `hr` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `blockquote`| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `pre` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `figure` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ul` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ol` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dl` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dd` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `th` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `td` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `fieldset` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `legend` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `input` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `textarea` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `button` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dialog` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `legend` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ol` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | ✘ | ✘ |
    | `p` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `pre` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `select` | ✘ | ✘ | ✘ | ✔ | ✔ | ✘ | ✔ |
    | `td` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `textarea` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `th` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ul` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |

    This means you’d need the following in your reset:

  3. csswizardry revised this gist Aug 29, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion margins-and-paddings.md
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ that would need a `margin` or `padding` removing in a reset stylesheet:
    | `textarea` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `button` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dialog` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | ✘ | |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | ✘ | ✘ |
    | `select` | ✘ | ✘ | ✘ | ✔ | ✔ | ✘ | ✔ |

    This means you’d need the following in your reset:
  4. csswizardry revised this gist Aug 29, 2025. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions margins-and-paddings.md
    View file
    Original file line number Diff line number Diff line change
    @@ -30,8 +30,8 @@ that would need a `margin` or `padding` removing in a reset stylesheet:
    | `textarea` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `button` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dialog` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | | |
    | `select` | | | | ✔ | ✔ | | ✔ |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | ✘ | |
    | `select` | ✘ | ✘ | ✘ | ✔ | ✔ | ✘ | ✔ |

    This means you’d need the following in your reset:

    @@ -63,4 +63,4 @@ I do interesting little bits of research like this all the time. You should
    **N.B.** There’s nothing wrong with `* {}` for this purpose—I just wanted to be
    extra thorough.

    All tested on real devices.
    All tested on real devices.
  5. csswizardry revised this gist Aug 28, 2025. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion margins-and-paddings.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,8 @@
    # `margin` or `padding` Candidates

    Every element in [current Baseline browsers](https://web-platform-dx.github.io/web-features/supported-browsers/?target=widelyAvailable) that would need a `margin` or `padding` removing in a reset stylesheet:
    Every element in [current Baseline
    browsers](https://web-platform-dx.github.io/web-features/supported-browsers/?target=widelyAvailable)
    that would need a `margin` or `padding` removing in a reset stylesheet:

    | Element | Chrome | Chrome for Android | Edge | Firefox | Firefox for Android | Safari | Safari for iOS |
    |-------------|:------:|:------------------:|:----:|:-------:|:-------------------:|:------:|:--------------:|
  6. csswizardry revised this gist Aug 28, 2025. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion margins-and-paddings.md
    View file
    Original file line number Diff line number Diff line change
    @@ -55,5 +55,10 @@ input, textarea, button, select, option {
    }
    ```

    I do interesting little bits of research like this all the time. You should
    [follow me for more](https://x.com/csswizardry).

    **N.B.** There’s nothing wrong with `* {}` for this purpose—I just wanted to be
    extra thorough. All tested on real devices.
    extra thorough.

    All tested on real devices.
  7. csswizardry revised this gist Aug 28, 2025. 1 changed file with 29 additions and 2 deletions.
    31 changes: 29 additions & 2 deletions margins-and-paddings.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # `margin` or `padding`
    # `margin` or `padding` Candidates

    Every element in [current Baseline browsers](https://web-platform-dx.github.io/web-features/supported-browsers/?target=widelyAvailable) that would need a `margin` or `padding` removing in a reset stylesheet.
    Every element in [current Baseline browsers](https://web-platform-dx.github.io/web-features/supported-browsers/?target=widelyAvailable) that would need a `margin` or `padding` removing in a reset stylesheet:

    | Element | Chrome | Chrome for Android | Edge | Firefox | Firefox for Android | Safari | Safari for iOS |
    |-------------|:------:|:------------------:|:----:|:-------:|:-------------------:|:------:|:--------------:|
    @@ -30,3 +30,30 @@ Every element in [current Baseline browsers](https://web-platform-dx.github.io/w
    | `dialog` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | | |
    | `select` | | | | ✔ | ✔ | | ✔ |

    This means you’d need the following in your reset:

    ```css
    /* Text Elements */
    h1, h2, h3, h4, h5, h6,
    p, blockquote, pre, hr,

    /* Lists */
    ul, ol, dl, dd,

    /* Tables */
    th, td,

    /* Containers */
    body, figure, dialog,

    /* Form Elements */
    fieldset, legend,
    input, textarea, button, select, option {
    margin: 0;
    padding: 0;
    }
    ```

    **N.B.** There’s nothing wrong with `* {}` for this purpose—I just wanted to be
    extra thorough. All tested on real devices.
  8. csswizardry created this gist Aug 28, 2025.
    32 changes: 32 additions & 0 deletions margins-and-paddings.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    # `margin` or `padding`

    Every element in [current Baseline browsers](https://web-platform-dx.github.io/web-features/supported-browsers/?target=widelyAvailable) that would need a `margin` or `padding` removing in a reset stylesheet.

    | Element | Chrome | Chrome for Android | Edge | Firefox | Firefox for Android | Safari | Safari for iOS |
    |-------------|:------:|:------------------:|:----:|:-------:|:-------------------:|:------:|:--------------:|
    | `body` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h1` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h2` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h3` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h4` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h5` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `h6` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `p` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `hr` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `blockquote`| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `pre` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `figure` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ul` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `ol` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dl` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dd` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `th` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `td` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `fieldset` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `legend` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `input` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `textarea` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `button` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `dialog` | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
    | `option` | ✔ | ✔ | ✔ | ✔ | ✔ | | |
    | `select` | | | | ✔ | ✔ | | ✔ |