为什么顶部衬垫不适用于我的锚？

Question

我在另一个div内的div里面有一个锚点.由于某种原因,顶部填充不适用于它,但底部和侧面填充将.谁知道为什么？

* {
    margin: 0;
    padding: 0;
}
.box a {
    border: 1px solid blue;
    padding: 60px 15px;
}

<div class="wrapper">
    <div class="box">
        <a>Test</a>
    </div>
</div>

Answer 1

它不起作用,因为默认情况下a是内联元素.如果你想像块一样对待它,你应该使它成为块或内联块(在这种情况下推荐):

* {
    margin: 0;
    padding: 0;
}
.box a {
    border: 1px solid blue;
    padding: 60px 15px;
    display: inline-block;
}

<div class="wrapper">
    <div class="box">
        <a>Test</a>
    </div>
</div>

作为内联元素,a在内容基线上呈现.但即使应用了填充顶部/底部值(与内联元素忽略的margin-top/bottom不同),增加的填充也会导致元素高度的变化.然而,尽管高度(也被忽略)内联元素仍然在基线上呈现,这就是为什么更改padding-top/bottom不会在视觉上移动元素.