Why does "overflow: hidden" cause the text to change size and shape?

Question

Under the following HTML and CSS:

Here is a Fiddle of the below:

/*CSS*/

.header {
  margin: 0px;
  padding: 0px;
  width: 100%;
}
.headertable {
  padding: 0px;
  margin: 0px;
  width: 100%;
  border-spacing: 0px;
}
.headertabletr {
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.logoanimation a {
  text-decoration: none;
  color: black;
}
.logoanimation p {
  display: inline-block;
  margin: 0px;
}
.logodisapear1 {
  overflow: hidden;
  width: 0px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.logoanimation:hover .logodisapear1 {
  width: 23px;
}
.logoanimation:hover .logodisapear2 {
  width: 56px;
}
.logodisapear2 {
  overflow: hidden;
  width: 0px;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}

<div class="container">
  <div class="header">
    <table class="headertable">
      <tr class="headertabletr">
        <td class="headerlogo">
          <div class="logoanimation">
            <a href="">
              <p>
                <</p>
                  <p>C</p>
                  <p class="logodisapear1">ode</p>
                  <p>U</p>
                  <p class="logodisapear2">niversity</p>
                  <p>/></p>
            </a>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

Why does 'ode' and 'niversity' move up and go smaller?

When I delete

overflow: hidden;

It goes back to normal size, but the text overlaps?

Answer 1

The scroll bar takes some height in your <p> element.

Add vertical-align: bottom:

Fiddle

/*CSS*/

.header {
  margin: 0px;
  padding: 0px;
  width: 100%;
}
.headertable {
  padding: 0px;
  margin: 0px;
  width: 100%;
  border-spacing: 0px;
}
.headertabletr {
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.logoanimation a {
  text-decoration: none;
  color: black;
}
.logoanimation p {
  display: inline-block;
  margin: 0px;
}
.logodisapear1 {
  overflow: hidden;
  vertical-align: bottom;
  width: 0px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.logoanimation:hover .logodisapear1 {
  width: 23px;
}
.logoanimation:hover .logodisapear2 {
  width: 56px;
}
.logodisapear2 {
  overflow: hidden;
  vertical-align: bottom;
  width: 0px;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}

<div class="container">
  <div class="header">
    <table class="headertable">
      <tr class="headertabletr">
        <td class="headerlogo">
          <div class="logoanimation">
            <a href="">
              <p>
                <</p>
                  <p>C</p>
                  <p class="logodisapear1">ode</p>
                  <p>U</p>
                  <p class="logodisapear2">niversity</p>
                  <p>/></p>
            </a>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>