Span not on same line as preceding element

July 23, 2022

I have a span which follows a nav. Why is it not on the same line as the nav?

I thought inline elements such as span do not start on a new line.

I haven’t done any CSS styling in my example.

<nav>
  <a href="#">HOME</a>
  <a href="#">SPEAKERS</a>
  <a href="#">SCHEDULE</a>
  <a href="#">VENUE</a>
  <a href="#">REGISTER</a>
</nav>
<span>&copy; blabla</span>

>Solution :

nav is by default display: block that’s why span even being inline by default it will go to a new line

.nav-inline {
  display: inline
}

<nav>
  <a href="#">HOME</a>
  <a href="#">SPEAKERS</a>
  <a href="#">SCHEDULE</a>
  <a href="#">VENUE</a>
  <a href="#">REGISTER</a>
</nav>
<span>&copy; blabla</span>

<hr />

<nav class="nav-inline">
  <a href="#">HOME</a>
  <a href="#">SPEAKERS</a>
  <a href="#">SCHEDULE</a>
  <a href="#">VENUE</a>
  <a href="#">REGISTER</a>
</nav>
<span>&copy; blabla</span>