为什么＆＃34;溢出：隐藏＆＃34;导致文本改变大小和形状？

Question

在以下HTML和CSS下：

以下是Fiddle以下内容：

＆＃13;

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为什么＆＃39; ode＆＃39;和大学＆＃39;向上移动并变小？

删除时

overflow: hidden;

它恢复到正常大小，但文本重叠？

Answer 1

滚动条在<p>元素中占据一定高度。

添加vertical-align: bottom：

Fiddle

＆＃13;

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;