CODEWITHSUNDEEP
htmlcss
Spidey
Spidey

Reputation: 974

How to make anchor padding fit inside div

Cheers, I'm making a horizontal link menu. I made parent div height 46px and would like to achieve anchor padding with 46px height in total.

How do I do that?

<div class="outside">
    <a href="#">FCC</a>
</div>
I'd like the green rectangle to fit inside parent div :)

.outside{
    width:100%;
    height:46px;
    background-color:red;
}

.outside a{
    float:left;
    text-decoration:none;
    background-color:green;
    padding-top:15px;
    padding-bottom:15px;
    font-size:16px;
}

There were some similiar questions but none of them included padding (which can be pretty complicated to calculate).

http://jsfiddle.net/T2Nqd/

Note: I'd like the link to stay centered inside padding and to be able too keep his width about 200px or so

Upvotes: 0

Views: 1202

Answers (2)

qiuyuntao
qiuyuntao

Reputation: 2394

You may add code of css like this

.outside a{
    line-height: 16px;
}

Because the fonts's hight is not only 16px, so padding + fonts'height > 46px, so you just to set line-height to solve this question.

Upvotes: 1

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Try this 

.outside a {
    float: left;
    padding: 13px 0px;
    text-decoration: none;
    background-color: green;
    font-size: 16px;
}

Upvotes: 2

Related Questions