Profile pic of Tommy KuTommy Ku's Blog

Reading and thinking

Oh my gosh SPACE!

Posted on  by Tommy Ku

This post is more than 2 years old, it may contain outdated information

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.

* {
  font-size: xx-large;

ul {
  background-color: yellow;

ul li {
  display: inline-block;
  list-style: none;
  margin: 0;

<p>with whitespace</p>

<p>without whitespace</p>

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…

— Myself earlier today

You could also look at...

This post first appeared on . Permalink:

About the author

Profile pic of Tommy Ku

Tommy Ku, a Hong Kong-based Software Engineer experienced developing PHP and Java-based web solutions and passionate in Web technology.

Also a hobbyist digital and film photographer.