From ea3892fc9167cece4a1d3aab2c342bf791baea7e Mon Sep 17 00:00:00 2001 From: Jason Safaiyeh Date: Mon, 24 May 2021 10:46:50 -0500 Subject: [PATCH] Add comment to clarify vertical-align warning (#4434) * Add comment to clarify vertical-align warning * fix typo * Update preflight.css Co-authored-by: Adam Wathan --- src/plugins/css/preflight.css | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index c92180636..f942f05e4 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -207,11 +207,20 @@ samp { } /** - * Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. + * 1. Make replaced elements `display: block` by default as that's + * the behavior you want almost all of the time. Inspired by + * CSS Remedy, with `svg` added as well. * - * https://github.com/mozdevs/cssremedy/issues/14 + * https://github.com/mozdevs/cssremedy/issues/14 + * + * 2. Add `vertical-align: middle` to align replaced elements more + * sensibly by default when overriding `display` by adding a + * utility like `inline`. + * + * This can trigger a poorly considered linting error in some + * tools but is included by design. + * + * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 */ img, @@ -222,8 +231,8 @@ audio, iframe, embed, object { - display: block; - vertical-align: middle; + display: block; /* 1 */ + vertical-align: middle; /* 2 */ } /**