html - div 大小不等于顶部和底部

Question

在下面的代码中，我发现 div 的大小在 ul 的顶部和底部不相等。

div 的大小仍然不相等，即使我将内边距设置为相等。 怎么了？

.footer {
  background-color: #4dbce9;
  padding: 40px 0;
  text-align: center;
  color: #fff;
}
.footer ul,
li {
  display: inline-block;
}
.footer a {
  font-size: 14pt;
  padding-right: 20px;
  color: #fff;
}

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-2">
      </div>

      <div class="col-md-8">
        <ul>
          <li>
            <a href="https://www.facebook.com/rony.fhebrian" />Facebook
          </li>
          <li>
            <a href="https://www.twitter.com/ronyfhebrian" />Twitter
          </li>
          <li>
            <a href="https://ronyfhebrian.wordpress.com" />Blog
          </li>
          <li>
            <a href="mailto:rony.fhebrian@outlook.com">Contact
          </li>
        </ul>
      </div>

      <div class="col-md-2">
      </div>

    </div>
  </div>
</div>

Answer 1

<a>缺少结束标记。

.footer {
  background-color: #4dbce9;
  padding: 40px 0;
  text-align: center;
  color: #fff;
}
.footer ul,
li {
  display: inline-block;
}
.footer a {
  font-size: 14pt;
  padding-right: 20px;
  color: #fff;
}

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-2">
      </div>

      <div class="col-md-8">
        <ul>
          <li>
            <a href="https://www.facebook.com/rony.fhebrian">Facebook</a>
          </li>
          <li>
            <a href="https://www.twitter.com/ronyfhebrian">Twitter</a>
          </li>
          <li>
            <a href="https://ronyfhebrian.wordpress.com">Blog</a>
          </li>
          <li>
            <a href="mailto:rony.fhebrian@outlook.com">Contact</a>
          </li>
        </ul>
      </div>

      <div class="col-md-2">
      </div>

    </div>
  </div>
</div>