CSS - 家长<a> is smaller than child</a>

Question

我有一个小组。看起来像这样：

这不是最好的，但它是我在PSD中所拥有的东西的副本。问题是当您检查HTML <a>是在图像显示之前它仍然<a>为0x0px时，问题在于该面板中的所有3个图像，我不知道如何要解决这个问题。有人可以帮助我让每个<a>与图像和按钮一样大吗？

HTML：

<section class="panel">
    <a href="#"><img src="images/right_banner.png"> </a>
    <a href="#"><div class="panel_button"><span class="text">NAHLÁSIT CHEATERA</span></div></a>
    <a href="#"><div class="panel_button"><span class="text">CW/TG REZERVACE</span></div></a>
</section>

CSS：

.panel {
    width: 200px;
    float: left;
    margin-top: 13px;      
}

.panel a {
    width: 201px;
    height: 200px;
    display: inline-block;     
}   

.panel_button {
    background-image: url("images/panel_blue_button.png");
    background-repeat: repeat-x;
    width: 198px;
    height: 93px;
    margin-top: 5px;
    font-weight: 16px;
}

.panel_button span{
    color: #ffffff;
    text-align: center;
    display: inline-block;
    margin-top: 40px;
    margin-left: 30px;
}

Live preview

Answer 1

锚元素目前是inline元素。您可以将其更改为block或inline-block以获得所需的结果。

.panel > a {
    display: block;
}