1

Why does this not render on 1 line?

I have to change div width to 24.5% for it work. I don't get it. 4 * 25% = 100%, right?

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

nav {
  width: 800px;
}

div {
  display: inline-block;
  width: 25%;
}
</style>

<nav>
    <div>Link</div>
    <div>Link</div>
    <div>Link</div>
    <div>Link</div>
</nav>
wvdz
  • 16,251
  • 4
  • 53
  • 90

1 Answers1

3

It doesn't render in one line because inline elements respect whitespace in the markup.

If you remove the whitespace, it will work as expected. For brevity, see the link above for alternative methods.

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304