Question

在以下代码中：

<a href="*">
    <h3>My really really long header</h3>
    <img src="thumbnail.png" width="150" height="100" />
</a>

h3溢出了它的大小。如果我将溢出设置为隐藏，则会在h3的底部添加额外的边距。如果我将标题更改为短标题，则不会出现额外的底部边距。

搜索完SO后，我发现了一些关于边缘崩溃的事情。但问题是，img和h3都没有应用保证金。

这是CSS：

h3 {
    width: 300px;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 10px;
    margin: 0;
    display: inline-block;
    width: 150px;
    background-color: #0f0;
}

a {
    position: relative;
    display: block;
    margin-bottom: 20px;
    padding: 4px;
    border: 1px solid #000;
    width: 160px;
    height: auto;
}

img {
    background-color: #00f;
}

Fiddle

如果我将标记font-size的{{1}}设置为零，则不会显示额外的边距。

问题：是否有正确的方法（不设置a）来解决此问题？

Answer 1

您已将h3设置为inline-block。默认情况下，inline-block尊重line-height和font-size。将您的h3更改为显示区块。

的CSS：

h3 {
    width: 300px;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 10px;
    margin: 0;
    display: block;
    width: 150px;
    background-color: #0f0;
    overflow:hidden;
}

Answer 2

从display: inline-block移除h3，或添加vertical-align:bottom。

你正在使h3和inline-block元素导致这种情况，因为它会在行框中以一种为（潜在的）字符的下行空间留出空间的方式进行布局同一行的文字内容。

margin-bottom，溢出隐藏

2 个答案: