孩子的填充大于父母的大小

Question

我想让我的标签与父div一样大（#logo，并且我在制作100％填充时遇到问题而不会使其大于父标记。

HTML

<div id="header">
    <div id="logo">
        <a href="#"></a>
    </div>
    <div class="hide" id="navigation">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Examples</a></li>
            <li><a href="#">Form</a></li>
            <li><a href="#">Contact</a></li>
      </ul>
  </div>
</div>

CSS

div#logo {
    background: url(https://i.imgur.com/sHTtXk4.png) no-repeat center center;
    background-size: cover;
    float: left;
    line-height: 80px;
    width: 10%;
    height: 80px;
    text-align: center;
}

div#logo a {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 100%;

https://jsfiddle.net/vwbo9exg/

Answer 1

删除padding并为display代码

添加a

div#logo a {
    background: #fff; 
    width: 100%;
    height: 100%;
    /* padding: 100%; */
    display: inline-block; /*Add this*/
}