CODEWITHSUNDEEP
css
Nepo Znat
Nepo Znat

Reputation: 3270

Padding of Title is outside of the div

i created a jsfiddle where you can see the problem. The padding of the title is outside the div:

http://jsfiddle.net/h8Guf/

<!-- HTML -->
<div>
    <h2><a href="#">This is a test text</a></h2>
</div>

/* CSS */
div {
    position: relative;
    float: left;
    width: 500px;
    height: 300px;
    background: red;
}

div h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;   
}

div h2 a {
    padding: 10px 20px;
    background: green;
}

Does anyone have an idea how to fix it?

Upvotes: 0

Views: 186

Answers (2)

celeriko
celeriko

Reputation: 1694

because your <h2> is positioned absolutely, the padding overruns the containing <div> there are a few ways to fix this. one would be to change the bottom value like so

div h2 {
position: absolute;
bottom: 10px;
left: 0;
margin: 0;   
}

this will compensate for your padding

Upvotes: 2

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Add display:block, Try following

div h2 a {
  padding: 10px 20px;
  background: green;
  display: block; /* Added Rule */
}

Demo Fiddle

Upvotes: 2

Related Questions