CODEWITHSUNDEEP
htmlcsspadding
Kemal Dwiheldy
Kemal Dwiheldy

Reputation: 499

child's padding is bigger than parent's size

I would like to make my tag is big as the parent div (#logo, and i'm having trouble making a 100% padding without making it bigger than the parent's tag.

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/

Upvotes: 0

Views: 61

Answers (1)

Athul Nath
Athul Nath

Reputation: 2606

Remove padding and add display for a tag

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

Upvotes: 1

Related Questions