Why is formatted HTML rendered differently?

Question

body {
  background-color: #2f67ba;
  color: #282f33;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  text-align: center;
}

div #mainBox {
  margin: 0 auto;
  width: 800px;
}

ul {
  padding-left: 2em;
}

.menu ul li a {
  color: #ffffff;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1.05em;
  text-decoration: none;
}

.menu ul li a:hover {
  color: #aad5ff;
}

.menu ul li {
  border-left: 1px solid #49565d;
  display: inline;
  margin-left: 5px;
  padding-left: 10px;
}

.menu ul li.first {
  border-left: 0 solid #49565d;
  margin-left: 0;
  padding-left: 0;
}

.menu ul li.last {
  border-right: 0 solid #49565d;
  margin-right: 0;
  padding-right: 0;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 15px 0;
  text-align: center;
}

.menu {
  background-color: transparent;
}

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="afd1d394957ec6c860a8.css"></head><body><div id="MainBox"><div class="menu"><ul><li class="first"><a href="">Home</a></li><li><a href="news.html">News</a></li><li><a href="forum.html" target="_blank">Forum</a></li><li><a href="download.html">Download</a></li><li><a href="screenshots.html">Screenshots</a></li><li><a href="wiki.html" target="_blank">Wiki</a></li><li><a href="http://git.mysite.org" target="_blank">Development</a></li><li><a href="http://bugs.mysite.org" target="_blank">Bugs</a></li></ul></div></div></body></html>

For the above snippet, the output I get in devTools set to iPhone X is:

However, if I format the HTML (VisualStudio Code used):

body {
  background-color: #2f67ba;
  color: #282f33;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  text-align: center;
}

div #mainBox {
  margin: 0 auto;
  width: 800px;
}

ul {
  padding-left: 2em;
}

.menu ul li a {
  color: #ffffff;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1.05em;
  text-decoration: none;
}

.menu ul li a:hover {
  color: #aad5ff;
}

.menu ul li {
  border-left: 1px solid #49565d;
  display: inline;
  margin-left: 5px;
  padding-left: 10px;
}

.menu ul li.first {
  border-left: 0 solid #49565d;
  margin-left: 0;
  padding-left: 0;
}

.menu ul li.last {
  border-right: 0 solid #49565d;
  margin-right: 0;
  padding-right: 0;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 15px 0;
  text-align: center;
}

.menu {
  background-color: transparent;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="afd1d394957ec6c860a8.css">
</head>

<body>
  <div id="MainBox">
    <div class="menu">
      <ul>
        <li class="first"><a href="">Home</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="forum.html" target="_blank">Forum</a></li>
        <li><a href="download.html">Download</a></li>
        <li><a href="screenshots.html">Screenshots</a></li>
        <li><a href="wiki.html" target="_blank">Wiki</a></li>
        <li><a href="http://git.mysite.org" target="_blank">Development</a></li>
        <li><a href="http://bugs.mysite.org" target="_blank">Bugs</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

The output changes to:

While this is more noticeable with mobile agents, the desktop output is also not the same, with the menu items being closer together on the first.

If the only thing different is the formatting of the template, why does the render change?

@epascarello I was of the belief that minified HTML should render the same, if only the space between tags is being changed, not of the text nodes. I now understand that I was wrong. — Kaustubh Badrike, Jul 21 '21 at 17:42

score 3 · Accepted Answer · answered Jul 21 '21 at 17:32

Formatting your HTML is inserting line breaks and spaces (from indenting) between your list item <li> elements. Your minified HTML has your list items touching with no space in between.

These whitespace characters are condensed into a single space when rendering HTML, but that space can still affect your layout when using display: inline elements.

Why is formatted HTML rendered differently?

1 Answers1