Background of line-height?

HTML & CSS
1

what maybe yet another stupid Q:

When an element is inline or displayed inline, and a line height is set… what is theactual height of the element ( for background purposes)

example :

ul{background: yellow; font-size: .7em; float: left; text-align: center; padding:0; margin:0}
ul li { padding:0; margin:0; display: inline; line-height: 2.15em}
ul li a { padding:0 .5em;line-height: 2.15em}
ul li a:hover {background:pink;}

Here my list seems to display horizontally, as intended, with a height of 2.15 em, also as intended, but when I hover a link only the te actual text has a pink bg, where as I would have expected the bg to include the entire line height…

what am i missing here?

2

Hi, the line-height specifies the height of each line (aka the spacing between each line)

The actual content won’t get the increased height thus the pink background won’t cover the entire line-height. Line-height is sorta like a margin between each line, if you want to think about it like that :).

Putting a border around the anchor will show you the height of the anchor (notice the line-height doesn’t affect the height)

3

Good question :slight_smile:

The inline formatting model is extremely complicated.

In your example you set the yellow background on the parent block element but you changed the background color on the child inline element whose background only stretches as far as the “content area” of that inline element.

The background of an inline element does not include it’s line height.

If you applied the yellow background to the anchor to start with you would see that only the content area (the font size of the element) is covered.

If you float the lists or make then display:block then they take on the full height of the parent.

It’s basically the difference between inline and block elements again.

10.6.1:

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, not the ‘line-height’. But only the [URL=“http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height”]‘line-height’ is used when calculating the height of the line box.

4

i see…
I was trying to avoid floating the list in the first place… but I guess I will need a plan b

5

Plan B : display:inline-block :slight_smile:

Still not without it’s problems though.

Or use padding:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
    font-size: .7em;
    float: left;
    text-align: center;
    padding:0;
    margin:0;
    line-height:2.15em;
    background:yellow;
}
ul li {
    padding:0;
    margin:0;
    display: inline;
}
ul li a {
    padding:.5em .5em;
}
ul li a:hover {
    background:pink;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
</ul>
</body>
</html>