Make parent element be the same height as child element?

Question

I have a heading with a link inside, I want to make the h2 a different background to the link. However, when I add padding to the link, it overflows the parents, how can I make the parent be the height of the child? ```

Something

h2 {background:blue; } h2 a {background:red; padding:20px; color:white;} ``` JSfiddle: http://jsfiddle.net/5LHmr/ Thanks

Accepted Answer

Set `display: inline-block` within the `h2 a { ... }` ruleset: Demo

Make parent element be the same height as child element?

Solution

Problem