Why top and bottom padding visible only if I add float?

Here are the 2 snippets for your reference.

When float is added:

nav {
  background-color: #333;
  overflow: hidden;
}

nav a {
  text-decoration: none;
  padding: 20px;
  text-align: center;
  float: left;
  color: white;
}

<nav>
  <a href="#">Home</a>
  <a href="#">College Reviews</a>
</nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

When float is removed:

nav {
    background-color: #333;
    overflow: hidden;
}

nav a {
    text-decoration: none;
    padding: 20px;
    text-align: center;
    color: white;
}

<nav>
        <a href="#">Hello</a>
        <a href="#">World</a>
</nav>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

It's because tag a has an inline display attribute by default.

nav {
    background-color: #333;
    overflow: hidden;
}

nav a {
    text-decoration: none;
    padding: 20px;
    display: inline-block;
    text-align: center;
    color: white;
}

<nav>
        <a href="#">Home</a>
        <a href="#">College Reviews</a>
</nav>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>