HTML element: pre

Compare CSS properties of <pre> with those of <div>

The HTML/Javascript snippet below compares the CSS properties of a <pre> element with those of a <div> element.

The most important differences, imho, are:

	pre	div
`white-space`	`pre`	`normal`
`font-family`	`monospace`	`Times New Roman`

<!DOCTYPE html>
<html>
<head>
  <title>Compare &lt;pre&gt; to &lt;div&gt;</title>
</head>
<body>

<div>abc</div>
<pre></pre>

</body>
</html>

<script>

let pre    = document.getElementsByTagName('pre')[0];
let div    = document.getElementsByTagName('div')[0];
let cssPre = window.getComputedStyle(pre);
let divPre = window.getComputedStyle(div);

console.log('x');
for(s of cssPre) {
   if (cssPre[s] != divPre[s]) {
      console.log(`${s}: ${cssPre[s]} != ${divPre[s]}`);
   }
}

</script>

Github repository about-HTML, path: /tags/pre/compare-div.html

HTML element: pre

Compare CSS properties of <pre> with those of <div>

See also