H3元素未继承CSS中的父级宽度

Question

我有一个div，其类别为“屏幕截图”（粉红色），并且在其中包含图像元素和标题元素（蓝色）。 如下图所示： h3标签未包含在其固定宽度的父级中。 如何在标题div中包含标题元素，使其宽度相同？ 指定宽度，边距，填充等不起作用。

HTML：

<div class="screenshot"><a href="#">
<img src="img/vert_img1.png" alt="Image description">
<h3>Heading #1</h3>
</a>
</div>

CSS：

#screenshots .screenshot
{
    background: pink;
    width: 209px;
    margin: 2px;
    padding-bottom: 1px;
}

.screenshot a img
{
    width: 200px;
    height: 150px;
    margin-right: 0px;
}

.screenshot a h3
{
    background-color: blue;
    margin-bottom: 10px;
    text-align: center;
    width: 209px;
}

Answer 1

此演示能否解决您遇到的问题？

我已经修复了标记，因为我注意到其他注释已经突出显示了，因为在a中包含h3 （或任何块级元素）是无效a 。

Answer 2

将h3更改为跨度，并为其指定一个类。 您不能在“ a”中包含h3。

span.whateverclass {
    display: block;   
    margin: 0;  
    padding: 0;  
}

您不需要给它一个宽度，因为块元素的总宽度是其封闭块的宽度（基本上）。 在上面的示例中，另一个元素可能赋予h3宽度。

也

a, img  {  
display:block;  
}

可能会有所帮助。

Answer 3

您是否尝试过简单地将硬编码宽度从h3定义中移除？

您并未明确删除填充，因此实际上是291px +浏览器在元素上实现的默认填充，这可能是其超出父容器范围的原因。

Answer 4

感谢您的所有帮助，我犯了一个新手错误，那就是将一个block元素放在一个内联中。 可以在锚标记中放置多个内联元素吗？

我最终得到的是：

<div class="screenshot">
    <a href="#">
        <img src="img/2_graphic.jpg" alt="Graphic Design">
        <span>GRAPHIC DESIGN</span>
    </a>                
</div>

#screenshots .screenshot
{
    width: 209px;
    float: left;
    margin-right: 35px;
    padding-bottom: 30px;
}

.screenshot a img
{
    width: 200px;
    height: 140px;
    margin-right: 0px;
}

.screenshot a span
{
    font-size: 90%;
    color: white;
    display: block;
    text-align: center;
}