Question

我创建了一个jsfiddle，您可以在其中看到问题。标题的填充在div之外：

<!-- 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;
}

有没有人知道如何修复它？

Answer 1

添加display:block，请尝试以下

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

Demo Fiddle

Answer 2

因为您的<h2>绝对定位，填充超出了包含<div>的内容，有几种方法可以解决这个问题。一个是改变bottom值，如此

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

这将补偿你的填充

标题的填充在div之外

2 个答案: