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?

As an additive to Kaiido's answer, if you add `float: left;` it will remove the spaces as well. — PixelAcorn, Jun 19 '15 at 01:47

score 3 · Answer 1 · edited Jun 19 '15 at 02:14

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>

It seems to be caused by the baseline of the `
` changing to the baseline of its parent when `overflow` is set to `hidden`... the [behaviour is outlined in this answer.](http://stackoverflow.com/a/22425601/2930477) — misterManSam, Jun 19 '15 at 02:10
It's your answer, but "Should fix it" implies that there is a chance that making the change may not fix the problem, which is not the case :) If you want to suggest that this is just one solution of many, you could say something along the lines of "One solution is to add..." Answers should be written in a confident manner, in my opinion. — misterManSam, Jun 19 '15 at 02:21

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

1 Answers1