My really really long header

Clever Geek Handbook

Margin-bottom with overflow are hidden

In the following code:

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

h3

overflows its size. If I set the overflow to hide, an extra edge is added to the bottom h3

. If I change the title to short, the extra bottom margin doesn't appear.

After searching SO I found something about collapsing fields. But the point is that there is no margin applied for img

and h3

.

Here's the 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

If I set the font-size

tag value a

to zero, no additional margin appears.

The question is : is there a correct way (not to install font-size: 0

) to solve this problem?

+3


source to share


2 answers


You have it installed h3

inline-block

. The default inline-block

matches line-height

and font-size

. Change h3

to the displayed block.

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


source


Remove display: inline-block

from h3

or add vertical-align:bottom

.



What you are creating an element of h3

an inline-block

, this is because as such it is laid out in row field in a way that leaves room for desenderov characters (potential) text content on this same line.

+1


source






More articles:


All Articles