Span not on same line as preceding element-CodePudding

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>

CodePudding user response：

span is a inline element but nav isn't. The nav element has already covered whole line for itself leaving no space for span. Hence span shows up in next line.
You can change display css property of nav to inline-block or inline-flex etc. to get the desired result.

CodePudding user response：

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 >
  <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>