Question

我有一个图像（这是一个链接），它的正下方有一个标题，如下所示：

<div>
    <a href = "http://fake.com/link">
        <img src = "http://fake.com/picture">
    </a>
    <p>
        Caption here.
    </p>
</div>

我基本上想要在灰色背景上设置图像。我最初将div的背景设置为灰色，这几乎起作用 - 但我后来注意到，不同图像周围的灰色条纹宽度不同。差不多，我试图让所有图像的边框宽度相等。

我尝试的不是将div的背景设置为灰色，在div周围设置5px边框并将段落的背景颜色设置为灰色...问题是段落的边缘＆＃ 39; s填充与父div的边缘对齐 - 因为父div没有背景颜色，它在标题的两边留下了薄白条......有谁知道我怎么能解决这个问题？

Answer 1

我不确定我完全理解这个问题。我相信你试图在图像周围找到一个平等的边界？将box-sizing: border-box添加到.wp-caption以规范您的填充

.wp-caption {
   background: #e1e1e1;
   border: 1px solid #f0f0f0;
   max-width: 96%;
   padding: 5px 3px 0;
   text-align: center;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}

Answer 2

当我看着这两张照片时，我注意到它们的宽度和高度都不同。如果你想让图像周围的填充相同，你需要给它们一个可以控制它的类。

将<p>与填充对齐到父</p> <div> </div>的边缘

2 个答案: