Profile pic of Tommy KuTommy Ku's Blog

Reading and thinking

Oh my gosh SPACE!

Posted on August 05, 2018

Over the years of developing for the web I would run into this problem say, once every other year. Take a look at this piece of code.

<style>
* {
  font-size: xx-large;
}

ul {
  background-color: yellow;
}

ul li {
  display: inline-block;
  list-style: none;
  margin: 0;
}
</style>

<p>with whitespace</p>
<ul>
  <li>Hello</li>
  <li>World</li>
</ul>

<p>without whitespace</p>
<ul><li>Hello</li><li>World</li></ul>

The output looks like this. Alternatively, you may look at it on CodePen. (makes me wanna self-host a private CodePen but let’s not go down that rabbit hole)

The list above has a space between two items, but not below

Have you noticed that for the upper list, there is a space between list items despite I have explicitly declared margin: 0; in their CSS properties? Also, observe that the same spacing doesn’t exist in the list below.

What makes the matter worse, if you open up Chrome’s DevTool and try to inspect the two elements, DevTool’s prettifies the HTML code in DevTool, ending up not showing the difference between the original HTML code.

On DevTool, you’d never realize the two lists are written differently in source code

To make the matter worse, static site generator likes to minify HTML during build but not during development, so it could take you an hour or so diff-ing the pages on DevTool trying to spot the difference, which you couldn’t, until you shout…

OH MY GOSH SPACEEEE!!!!!!
— Myself earlier today

You could also look at...