Why Preflight doesn't reset all margins #13298

andrecasal · 2024-03-21T08:03:06Z

andrecasal
Mar 21, 2024

I was wondering why the preflight styles don't just do:

* {
 margin: 0;
}

instead of

body {
  margin: 0;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
}
ol,
ul,
menu {
  margin: 0;
}

So I've built an HTML page with all the html tags and ran a script to target any elements that still have some kind of margin:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Complete List of HTML Tags</title>
		<style>
			*,
			:before,
			:after {
				box-sizing: border-box;
				border-width: 0;
				border-style: solid;
				border-color: #e5e7eb;
			}
			:before,
			:after {
				--tw-content: '';
			}
			html,
			:host {
				line-height: 1.5;
				-webkit-text-size-adjust: 100%;
				-moz-tab-size: 4;
				-o-tab-size: 4;
				tab-size: 4;
				font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
				font-feature-settings: normal;
				font-variation-settings: normal;
				-webkit-tap-highlight-color: transparent;
			}
			body {
				margin: 0;
				line-height: inherit;
			}
			hr {
				height: 0;
				color: inherit;
				border-top-width: 1px;
			}
			abbr:where([title]) {
				-webkit-text-decoration: underline dotted;
				text-decoration: underline dotted;
			}
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-size: inherit;
				font-weight: inherit;
			}
			a {
				color: inherit;
				text-decoration: inherit;
			}
			b,
			strong {
				font-weight: bolder;
			}
			code,
			kbd,
			samp,
			pre {
				font-family:
					ui-monospace,
					SFMono-Regular,
					Menlo,
					Monaco,
					Consolas,
					Liberation Mono,
					Courier New,
					monospace;
				font-feature-settings: normal;
				font-variation-settings: normal;
				font-size: 1em;
			}
			small {
				font-size: 80%;
			}
			sub,
			sup {
				font-size: 75%;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
			}
			sub {
				bottom: -0.25em;
			}
			sup {
				top: -0.5em;
			}
			table {
				text-indent: 0;
				border-color: inherit;
				border-collapse: collapse;
			}
			button,
			input,
			optgroup,
			select,
			textarea {
				font-family: inherit;
				font-feature-settings: inherit;
				font-variation-settings: inherit;
				font-size: 100%;
				font-weight: inherit;
				line-height: inherit;
				color: inherit;
				margin: 0;
				padding: 0;
			}
			button,
			select {
				text-transform: none;
			}
			button,
			[type='button'],
			[type='reset'],
			[type='submit'] {
				-webkit-appearance: button;
				background-color: transparent;
				background-image: none;
			}
			:-moz-focusring {
				outline: auto;
			}
			:-moz-ui-invalid {
				box-shadow: none;
			}
			progress {
				vertical-align: baseline;
			}
			::-webkit-inner-spin-button,
			::-webkit-outer-spin-button {
				height: auto;
			}
			[type='search'] {
				-webkit-appearance: textfield;
				outline-offset: -2px;
			}
			::-webkit-search-decoration {
				-webkit-appearance: none;
			}
			::-webkit-file-upload-button {
				-webkit-appearance: button;
				font: inherit;
			}
			summary {
				display: list-item;
			}
			blockquote,
			dl,
			dd,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			hr,
			figure,
			p,
			pre {
				margin: 0;
			}
			fieldset {
				margin: 0;
				padding: 0;
			}
			legend {
				padding: 0;
			}
			ol,
			ul,
			menu {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			dialog {
				padding: 0;
			}
			textarea {
				resize: vertical;
			}
			input::-moz-placeholder,
			textarea::-moz-placeholder {
				opacity: 1;
				color: #9ca3af;
			}
			input::placeholder,
			textarea::placeholder {
				opacity: 1;
				color: #9ca3af;
			}
			button,
			[role='button'] {
				cursor: pointer;
			}
			:disabled {
				cursor: default;
			}
			img,
			svg,
			video,
			canvas,
			audio,
			iframe,
			embed,
			object {
				display: block;
				vertical-align: middle;
			}
			img,
			video {
				max-width: 100%;
				height: auto;
			}
			[hidden] {
				display: none;
			}
		</style>
		<script>
			document.addEventListener('DOMContentLoaded', function () {
				function checkMarginStyles() {
					// Get all elements in the DOM
					const allElements = document.querySelectorAll('*')

					// Array to store elements with margin styles
					const elementsWithMargin = []

					// Loop through each element
					allElements.forEach(element => {
						// Get the computed style of the element
						const computedStyle = window.getComputedStyle(element)

						// Check if margin is applied in any form (top, right, bottom, left)
						if (computedStyle.marginTop !== '0px' || computedStyle.marginRight !== '0px' || computedStyle.marginBottom !== '0px' || computedStyle.marginLeft !== '0px') {
							// Add element to the array if any margin style is detected
							elementsWithMargin.push(element)
						}
					})

					// Return the elements with margin styles
					return elementsWithMargin
				}

				const elementsWithMargin = checkMarginStyles()
				console.log(elementsWithMargin) // Log the elements with margin styles
			})
		</script>
	</head>
	<body>
		<a href="#">Anchor</a><br />
		<abbr title="Abbreviation">abbr</abbr><br />
		<address>Address</address>
		<br />
		<area shape="rect" coords="0,0,10,10" alt="Area" /><br />
		<article>Article</article>
		<br />
		<aside>Aside</aside>
		<br />
		<audio controls>
			<source src="horse.ogg" type="audio/ogg" />
			Your browser does not support the audio element.</audio
		><br />
		<b>Bold</b><br />
		<base href="https://www.example.com/" /><br />
		<bdi dir="rtl">BDI</bdi><br />
		<bdo dir="rtl">BDO</bdo><br />
		<blockquote cite="https://www.example.com/">Blockquote</blockquote>
		<br />
		<body>
			Body
		</body>
		<br />
		<br />Line Break<br />
		<button type="button">Button</button><br />
		<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #000">Canvas</canvas><br />
		<caption>
			Table Caption
		</caption>
		<br />
		<cite>Citation</cite><br />
		<code>Code</code><br />
		<col />
		<br />
		<wbr /><br />
		<data value="123">Data</data><br />
		<datalist>
			<br />
			<option value="HTML">HTML</option>
			<br />
			<option value="CSS">CSS</option>
			<br />
			<option value="JavaScript">JavaScript</option>
			<br /></datalist
		><br />
		<dd>Description List Definition</dd>
		<br />
		<del datetime="2005-10-10T12:00:00Z">Deleted Text</del><br />
		<details>
			<br />
			<summary>Details</summary>
			<br />
			<p>Additional details here...</p>
			<br />
		</details>
		<br />
		<dfn>Definition</dfn><br />
		<dialog open>Dialog Box</dialog>
		<br />
		<div>Division</div>
		<br />
		<dl>
			<br />
			<dt>Description Term</dt>
			<br />
			<dd>Description</dd>
			<br />
		</dl>
		<br />
		<em>Emphasis</em><br />
		<embed src="horse.mp3" type="audio/mpeg" /><br />
		<fieldset>
			<br />
			<legend>Legend</legend>
			<br />
			<input type="radio" id="radio1" name="radio" /><label for="radio1">Radio Button 1</label><br />
			<input type="radio" id="radio2" name="radio" /><label for="radio2">Radio Button 2</label><br />
		</fieldset>
		<br />
		<figcaption>Figure Caption</figcaption>
		<br />
		<figure>
			<br />
			<img src="image.jpg" alt="Image" /><br />
			<figcaption>Figure Caption</figcaption>
			<br />
		</figure>
		<br />
		<footer>Footer</footer>
		<br />
		<form action="/submit" method="post">
			<br />
			<input type="text" name="fname" value="John" /><br />
			<input type="submit" value="Submit" /><br />
		</form>
		<br />
		<h1>Heading 1</h1>
		<br />
		<h2>Heading 2</h2>
		<br />
		<h3>Heading 3</h3>
		<br />
		<h4>Heading 4</h4>
		<br />
		<h5>Heading 5</h5>
		<br />
		<h6>Heading 6</h6>
		<br />
		<head>
			Head</head
		><br />
		<header>Header</header>
		<br />
		<hr />
		<br />
		<html>
			HTML
		</html>
		<br />
		<i>Italic</i><br />
		<iframe src="https://www.example.com/"></iframe><br />
		<img src="image.jpg" alt="Image" /><br />
		<input type="text" placeholder="Input" /><br />
		<ins datetime="2005-10-10T12:00:00Z">Inserted Text</ins><br />
		<kbd>Keyboard Input</kbd><br />
		<label for="lname">Last Name:</label><input type="text" id="lname" name="lname" /><br />
		<legend>Legend</legend>
		<br />
		<li>List Item</li>
		<br />
		<link rel="stylesheet" href="styles.css" /><br />
		<main>Main Content</main>
		<br />
		<map name="workmap"
			><br />
			<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm" /><br /> </map
		><br />
		<mark>Marked Text</mark><br />
		<meta charset="UTF-8" /><br />
		<meter value="2" min="0" max="10">2 out of 10</meter><br />
		<nav><a href="#">Navigation</a></nav>
		<br />
		<noscript>Your browser does not support JavaScript!</noscript><br />
		<object data="horse.mp3" type="audio/mpeg">
			<br />
			Your browser does not support the audio element.<br /></object
		><br />
		<ol>
			<br />
			<li>List Item 1</li>
			<br />
			<li>List Item 2</li>
			<br />
		</ol>
		<br />
		<optgroup label="Group">
			<br />
			<option value="option1">Option 1</option>
			<br />
			<option value="option2">Option 2</option>
			<br />
		</optgroup>
		<br />
		<option value="option">Option</option>
		<br />
		<output for="x"></output><br />
		<p>Paragraph</p>
		<br />
		<param name="autoplay" value="true" />
		<br />
		<picture
			><br />
			<source media="(min-width: 650px)" srcset="image.jpg" />
			<br />
			<img src="image_sm.jpg" alt="Image" /><br /> </picture
		><br />
		<pre>Preformatted Text</pre>
		<br />
		<progress value="70" max="100">70%</progress><br />
		<q cite="https://www.example.com/">Inline Quotation</q><br />
		<rp>(</rp><br />
		<rt>Ruby Text</rt><br />
		<rtc>Ruby Text Container</rtc><br />
		<ruby>Ruby Annotation</ruby><br />
		<s>Strikethrough</s><br />
		<samp>Sample</samp><br />
		<script src="script.js"></script>
		<br />
		<section>Section</section>
		<br />
		<select>
			<br />
			<option value="volvo">Volvo</option>
			<br />
			<option value="saab">Saab</option>
			<br />
			<option value="fiat">Fiat</option>
			<br />
			<option value="audi">Audi</option>
			<br /></select
		><br />
		<small>Small</small><br />
		<source src="movie.mp4" type="video/mp4" />
		<br />
		<span>Span</span><br />
		<strong>Strong</strong><br />
		<style>
			body {
				background-color: powderblue;
			}
		</style><br />
		<sub>Subscript</sub><br />
		<summary>Summary</summary>
		<br />
		<sup>Superscript</sup><br />
		<table>
			<br />
			<tr>
				<th>Header</th>
			</tr>
			<br />
			<tr>
				<td>Data</td>
			</tr>
			<br />
		</table>
		<br />
		<tbody>
			<br />
			<tr>
				<td>Table Body</td>
			</tr>
			<br />
		</tbody>
		<br />
		<td>Table Data</td>
		<br />
		<template
			><br />
			<h2>Template</h2>
			<br /> </template
		><br />
		<textarea rows="4" cols="50">Textarea</textarea><br />
		<tfoot>
			<br />
			<tr>
				<td>Table Foot</td>
			</tr>
			<br />
		</tfoot>
		<br />
		<th>Table Header</th>
		<br />
		<thead>
			<br />
			<tr>
				<th>Table Head</th>
			</tr>
			<br />
		</thead>
		<br />
		<time datetime="2008-02-14 20:00">Valentine's Day</time><br />
		<title>Title</title><br />
		<tr>
			<td>Table Row</td>
		</tr>
		<br />
		<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
		<br />
		<u>Underline</u><br />
		<ul>
			<br />
			<li>Unordered List Item 1</li>
			<br />
			<li>Unordered List Item 2</li>
			<br />
		</ul>
		<br />
		<var>Variable</var><br />
		<video controls>
			<source src="movie.mp4" type="video/mp4" />
			Your browser does not support the video tag.</video><br />
		<wbr />Word Break Opportunity<wbr /><br />
	</body>
</html>

I've found that only the <dialog> element has margin: auto (tested on Chrome, Safari, Edge, and Firefox), horizontally centering the dialog, which is what you'd expect for a dialog.

So that's why Preflight doesn't just do

* {
 margin: 0;
}

Now you know 😉

elyas-32 · 2024-09-28T05:05:44Z

elyas-32
Sep 28, 2024

So cool! I was looking for this it seems you was the only person who cared about this and tested it very well (the script you wrote was very cool to me )

1 reply

andrecasal Sep 28, 2024
Author

Thanks @elyas-32, I'm glad it was useful :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Why Preflight doesn't reset all margins #13298

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Why Preflight doesn't reset all margins #13298

andrecasal Mar 21, 2024

Replies: 1 comment · 1 reply

elyas-32 Sep 28, 2024

andrecasal Sep 28, 2024 Author

andrecasal
Mar 21, 2024

Replies: 1 comment 1 reply

elyas-32
Sep 28, 2024

andrecasal Sep 28, 2024
Author