使父元素与子元素的高度相同？

Question

我有一个带有链接的标题，我想让h2成为链接的不同背景。但是，当我向链接添加填充时，它会溢出父节点，如何使父节点成为子节点的高度？

<h2><a href="#">Something</a></h2>  

h2 {background:blue; }
h2 a {background:red; padding:20px; color:white;}

JSfiddle：http://jsfiddle.net/5LHmr/

由于

Answer 1

在display: inline-block规则集中设置h2 a { ... }：Demo

Answer 2

使用display:inline-block

h2 a {
 background:red; 
 padding:20px; 
 color:white;
 display:inline-block;
}

Js Fiddle

Answer 3

h2 {background:blue; padding:20px;}
h2 a {background:red; padding:20px; color:white;}

http://jsfiddle.net/5LHmr/4/