html - 添加按钮后包装尺寸增加

Question

我有一个图像包装器，我想在其中显示一个黑色背景的鼠标悬停按钮。我尝试这样做，但它在底部的容器中添加了一个空白区域，我不知道为什么。

HTML:

<div class="tour-box-wrapper" style="margin-right:45px">
    <div class="image-wrapper">
          <a href="#" class="grayscale"><img src="http://static.teambuy.ca/deal/540x254/other/28165573-2014-03-03-28144457-boxhouse-10b.jpg" /></a> 
          <a><button type="button" class="view-deal-button"  >View Deal</button></a>
    </div>
</div>

CSS:

.tour-box-wrapper
{
width:45%;
border: 1px solid #BBB;
padding:2px;
background-color: #E7E7E7;
background-image: -webkit-gradient(linear,left top,left    bottom,from(#FFFFFF),to(#E7E7E7));
background-image: -webkit-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -moz-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -ms-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -o-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: linear-gradient(to bottom,#FFFFFF,#E7E7E7);
float:left;
display:block;
}

.image-wrapper 
{
border:1px solid #E0E0E0;
padding:2px;
display: block;

}

.image-wrapper img
{   
width:100%;
}

a.grayscale {
display: inline-block;
background: black;
padding: 0;
}

a.grayscale img {
display: block;
}

a.grayscale:hover img
{
opacity: 0.5;
}
.view-deal-button 
{
border: none;
text-align: center;
border-radius: 6px;
text-align: center;
z-index: 999;
position: relative;
left: 343px;
bottom: 36px;
background-color: #CD277B;
padding:6px;
 }

.view-deal-button a
{
color:white;
font-size:14px;
}

请注意忽略我知道将用于在鼠标输入时显示按钮的 Javascript，但我只想修复图像下方的这个额外空间，并希望将按钮置于图像的右下角。

JSFiddle

Answer 1

你的按钮有一个“相对”的位置是什么创造了底部的空间。它的“质量”正在影响其父容器。如果您不希望它有任何“质量”，请尝试将它定位为相对于父级的“绝对”。