diff options
author | EuAndreh <eu@euandre.org> | 2024-11-18 08:21:58 -0300 |
---|---|---|
committer | EuAndreh <eu@euandre.org> | 2024-11-18 08:44:57 -0300 |
commit | 960e4410f76801356ebd42801c914b2910a302a7 (patch) | |
tree | 615d379416f72956d0c1666c63ce062859041fbe /src/content/pastebins/2021/08/11 | |
parent | Remove jekyll infrastructure setup (diff) | |
download | euandre.org-main.tar.gz euandre.org-main.tar.xz |
Diffstat (limited to 'src/content/pastebins/2021/08/11')
-rw-r--r-- | src/content/pastebins/2021/08/11/h1-spacing.adoc | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/src/content/pastebins/2021/08/11/h1-spacing.adoc b/src/content/pastebins/2021/08/11/h1-spacing.adoc new file mode 100644 index 0000000..9a00ece --- /dev/null +++ b/src/content/pastebins/2021/08/11/h1-spacing.adoc @@ -0,0 +1,96 @@ +--- + +title: Spaces around h1 tags + +date: 2021-08-11 + +updated_at: 2021-08-15 + +layout: post + +lang: en + +ref: spaces-around-h1-tags + +--- + +*EDIT*: Apparently, the behaviour below is consistent between Firefox and +Chromium for links, but not for `<h1>`. +My conclusion is that the `<h1>` behaviour is a Firefox quirk, but the `<a>` is +expected. + +--- + +The HTML below has selectable extra spaces after `<h1>` tags: + +```html +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>Spaces around h1 tags</title> + </head> + <body> + <main> + <h1> + With spaces around when selecting this heading + </h1> + <h1>Without spaces around</h1> + <p> + Is this expected behaviour? + </p> + </main> + </body> +</html> +``` + +The rendered output is: + +<h1> + With spaces around when selecting this heading +</h1> +<h1>Without spaces around</h1> +<p> + Is this expected behaviour? +</p> + +--- + +The same with links: + +```html +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>Spaces after a tags</title> + </head> + <body> + <main> + <p> + <a href="#"> + With extra underlined space + </a> + </p> + <p> + <a href="#">Without extra underlined space</a> + </p> + </main> + </body> +</html> +``` + +The rendered output is: + +<p> + <a href="#"> + With extra underlined space + </a> + after the link. +</p> +<p> + <a href="#">Without extra underlined space</a> + after the link. +</p> |