Skip to content
loading...

Default 4px spacing between inline elements

Andrei Navumau on October 21, 2017

Problem stating If you try to create a navigation element ('nav') with menu created via not ordered list items, you will find yourself facing a ... [Read Full]
markdown guide
 

have you tried using tabs to indent instead of spaces?

spaces have layout in inline rendering, tabs are completely ignored by the browser.

since the days of IE* (hasLayout property) this has been my argument for indenting browser code (html) with tabs instead of spaces.

 

Hi Mike,

That's a great idea.

My code editor settings are set up so that even if I use tabs, it inserts 4 spaces instead. I'm not ready to switch to pure tabs, because coding rules of different companies require using spaces instead of tabs. I try to stick to this practice.

Moreover, it seems to me, that 4px space is generated not because of spaces in indentation, but due to line feed.

 

hmm okay the RFC proves me wrong.

w3.org/TR/REC-html40/struct/text.h...

apparently i relied on this for years when browsers would ignore them.

i stand corrected. thanks for your workarounds. :)

 

i'm telling stories from long ago; back before we had (good) CSS layout we had to recognize what characters the browsers regarded as having layout and which they don't. things have have changed on me :)

 

Whoa, that settles the incessant debate (no it won't)

 

nothing will ever settle the tabs/spaces debate :) and packaging/minifying tools will take care of problems like this, but also introduce aberrations where what we see in our development environment may not exactly match what ends up in production.

 

My typical answer to this problem is using flexbox.

From the CSS Tricks article, with the css

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

if you turn the CSS into the following you get the same result :D

nav {
  display: flex;
}
nav a {
  padding: 5px;
  background: red;
}

 

Thank you, Sean. I've added this method into my post.

 

This is an issue I've seen even experienced developers struggle with. Personally, I use a similar approach to the 4th HTML method, which looks clean enough for my team. Thanks for writing this article.

code of conduct - report abuse