html - 表格中的段落叠加在边缘周围产生不需要的间隙

Question

对于我的主页，我有四个嵌套在表格中的图像，这些图像将用作指向其他页面的链接。悬停时，我有一个稍微透明的背景，文字覆盖图片(段落元素)。一切都按预期工作，但是叠加层和表格单元格的边缘之间存在 ~1px 的间隙。我弄乱了边距，可以让它到达顶部和左侧，但底部和右侧仍然有问题。我对 html 和 css 非常陌生，非常感谢任何反馈!

这是 html:

<div id="wrapper">
    <table id="hometable">
        <thead></thead>
        <tbody>
            <tr>
                <td class="homeimg" id="longboardingnav">
                    <p class="hidden">Longboarding</p>
                </td>
                <td class="homeimg" id="workinprogress1"></td>
            </tr>
            <tr>
                <td class="homeimg" id="workinprogress2"></td>
                <td class="homeimg" id="workinprogress3"></td>
            </tr>
        </tbody>
    </table>
</div>

这是CSS:

#wrapper {
    margin: auto;
    width: 60%;
}

#hometable {
    margin: auto;
    margin-top: 100px;
    table-layout: fixed;
}

.homeimg {
    border: 2px solid #000;
    height: 175px;
    width: 250px;
}

#longboardingnav {
    background-image: url(images/photo4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.homeimg .hidden {
    position: relative;
    visibility: hidden;
    background: rgba(125,125,125,0.82);
    height: 77px;
    width: 152px;
    margin: 0;
    color: #FFF;
    font-family: Verdana;
    text-align: center;
    padding: 50px;
    display: block;
}

.homeimg:hover .hidden {
    visibility: visible;
    opacity: 1;
}

Answer 1

你只需要在单元格上设置内边距

#hometable td {
    padding: 0;
}

jsFiddle