H3 Element不在CSS中继承父宽度

Question

我有一个带有一类'screenshot'（粉红色）的div，里面是一个图像元素和一个标题元素（蓝色）。如下图所示; h3标记未被其固定宽度父级包含。如何在父div中包含heading元素，以便它的宽度相同？指定宽度，边距，填充等不起作用。

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

this demo会解决您遇到的问题吗？

我已经修复了标记，因为我注意到其他注释已经突出显示，因为在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

感谢所有帮助人员，我犯了一个错误，就是将一个块元素放在内联中。是否可以在锚标记内放置多个内联元素？

这是我最终的结果：

<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;
}