Inline elements and line-height
This might be confusing because in the inline formatting model there are different heights.
Height of an inline box
An element with display: inline
generates an inline box:
An inline box is one that is both inline-level and whose contents
participate in its containing inline formatting context. A
non-replaced element with adisplay
value ofinline
generates an
inline box.
And line-height
determines the height of that box:
The height of the inline box encloses all glyphs and their
half-leading on each side and is thus exactly 'line-height'
Therefore, your box is, in fact, 15px
tall.
Height of a line box
There are also line boxes:
In an inline formatting context, boxes are laid out horizontally, one
after the other, beginning at the top of a containing block.
Horizontal margins, borders, and padding are respected between these
boxes. The boxes may be aligned vertically in different ways: their
bottoms or tops may be aligned, or the baselines of text within them
may be aligned. The rectangular area that contains the boxes that form
a line is called a line box.The height of a line box is determined by the rules given in the
section on line height calculations.
In case a line box only contains non-replaced inline boxes with the same line-height
and vertical-align
, those rules say that the height of the line box will be given by line-height
.
So in your case, this is also 15px
.
Height of the content area of an inline box
However, the developer tools of your browser said 18px
. That's because those 18px
are the height of the content area. It's also this content area (together with paddings) which is painted by the green background.
Note those 18px
might vary because CSS 2.1 doesn't specify an algorithm:
The height of the content area should be based on the font, but this
specification does not specify how. A UA may, e.g., use the em-box or
the maximum ascender and descender of the font. (The latter would
ensure that glyphs with parts above or below the em-box still fall
within the content area, but leads to differently sized boxes for
different fonts; the former would ensure authors can control
background styling relative to the 'line-height', but leads to glyphs
painting outside their content area.)
If an UA implements the first suggestion, the content height will be given by font-size
, which determines the em-box. This would what you expected, with the green box being 15px
tall.
However, most UAs don't seem to do that. That means that, probably, the height will be the height of the tallest glyph in the font-family
and font-size
used.
But using a font-size
value of 15px
doesn't mean that the tallest glyph will be 15px
tall too. That depends on the font. This is somewhat analogous to normal
, the initial value of line-height
, which is defined as
Tells user agents to set the used value to a "reasonable" value based
on the font of the element[...]. We recommend a used value for
'normal' between1.0
to1.2
.
That means that, if you use font-size: 15px
, a "reasonable" line-height
would be between 15px
and 18px
. In the "Verdana" font, Firefox thinks the best is 18px
; in the "sans-serif", it uses 17px
.
css - inline elements ignoring line-height
What webkit inspector shows (and what you measured in PhotoShop) is the content area's dimensions.
See http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced
The height of the content area [of inline elements] should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font...
Different browsers simply use a different approach here. See http://jsfiddle.net/ejqTD/1/ for an illustration of that. Note how webkit renders a higher content area, but line-height is still correct.
The content area exceeds the line box in this case, which is permitted: http://www.w3.org/TR/CSS2/visudet.html#leading
if the height specified by 'line-height' is less than the content height of contained boxes, backgrounds and colors of padding and borders may "bleed" into adjoining line boxes.
It's easy to see if you consider line-heights < 1: http://jsfiddle.net/KKMmK/
Why does HTML5 ignore line-height smaller than font-size?
Your <a>
tag is an inline element and it appears in HTML5 inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body>
style if that is the immediate parent ).
Example:
body { line-height:20px; }
a { line-height:12px; }
and this markup:
<body>
<a href="#">test</a>
</body>
The <a>
tag will have a line-height of 20px not 12px.
So your 'inline' <a style="line-height:12px;" href="#">something</a>
didn't work but did when you wrapped it in the 'block'-level <div>
element because block elements can dictate line-height.
A better way than bloating your markup by wrapping your inline element in a block element, just use CSS to make the tag display 'inline-block'.
<a style="display:inline-block; line-height:12px;" href="#">something</a>
Even better, give your <a>
a class (change 'xx' below to something semantic):
<a class="xx" href="#">something</a>
Then in your CSS file set that class to 'inline-block':
.xx { display:inline-block; line-height:12px; }
Hope that helps.
Why line-height is ignored in a span tag and works in div tag?
On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.
On replaced inline elements, like buttons or other input element, line-height has no effect.
Src: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Varying line-height and font-size causing gaps in inline-block elements
The line-height
s of the spans are equal, but by default they are vertically aligning on the baseline of the text. Since the text is vertically centred in the spans, the baseline of the smaller text is higher in the span. So when the baselines are aligned, the tops of the spans with the smaller font are lower than the tops of the other spans.
You can vertically centre the spans using vertical-align: middle
(or top
or bottom
, basically anything other than the default baseline
) if you don't mind your text actually being vertically centred. This gives you what you're looking for, although it may seem like the smaller text is "floating" a little due the the baselines not being aligned any more.
(Also note that the height
properties are having no effect on the spans).
Why a div with an empty inline-block has height?
But when the span display is 'inline', why the div's height are 0?
Not 100% correct because if the span has at least one character the height will be different from 0. Even an invisible zero width space:
div {
background: red;
}
<div><span></span></div>
Understanding CSS2.1 specification regarding height on inline-level boxes
Is the height of inline-level boxes equal to the line-height property set on them (with the minimum being the line-height set on the parent block container element),
Yes it is.
OR is it just determined by the font height (and UA implementation)?
No it isn't
CSS is really about boxes, not elements, and you should try not to confuse the two.
So an inline element has associated with it a number of boxes. A content box, padding box, border box and margin box. It also has zero (if display:none
), one, or multiple inline boxes. The content box, paddings, borders and margins may be divided among the inline boxes so that the inline content can be spread over more than one line.
The inline box's height is the content height adjusted by the leading. It's the leading that does the magic here. The leading is defined as the line-height of the element minus the content height of that inline box.
Simply rearranging that equation tells us that the height of the inline box depends only on the line-height and not on the content box (or padding, border, margin boxes).
Note that none of the above discusses the line box, which is a different thing again and not a direct property of inline elements or their boxes. The line box is constructed by arranging the inline boxes that occur on the same line such that their vertical alignments fit the rules computed for the elements, including the zero width inline box formed by the strut.
Each line box is bounded by the top of uppermost inline box and the bottom of the lowestmost inline box that that line box contains.
Digression: On why the height of the line box can surprise.
Suppose we have a simple case of a containing block which just contains one short inline element (i.e. short enough that it fits in a single line box). Also suppose that everything is aligned on the baseline. Let's say that the line-height is set on the containing box to 20px, and the inline element inherits that. Also suppose that the font-size (em-square) of the containing block is 16px, and that means that the font metrics compute to an ascent (above the baseline) of 14px and a descent (below the baseline) of 4px.
So the content area for the strut is (14px + 4px =) 18px high. The line-height is 20px, so there is 2px leading, 1px goes above the ascent, and 1px below the descent. So the line-height of the strut is made of 15px above the baseline and 5px below the baseline.
Now, suppose that the font-size of the inline element is set to 0.5em (i.e. half that of the containing block). The content area for the inline element will be an ascent of 7px and a descent of 2px. The line-height is still 20px, so the leading is 20px - (7px + 2px) = 11px, meaning that 5.5px goes above the ascent and 5.5px goes below the descent. This results in the line-height for the inline element is made of 12.5px above the baseline and 7.5px below the baseline.
Since the strut and the inline element are aligned vertically to their baselines, the top of the uppermost inline box (the strut) is 15px above the baseline and the bottom of the the lowermost inline box (the inline element) is 7.5px below the baseline, the actual height of the line box is not 20px but (15px + 7.5px =) 22.5px.
Related Topics
Exclude Element with Fixed Positioning from Justify-Content in Flex Layout
How to Set the Space Between Lines in a Div Without Setting Line Height
CSS to Align Label and Inputs on Form
<Table> with Fixed <Thead> and Scrollable <Tbody>
How to Display Text Around Circle. CSS Shape-Outside
HTML5 Input Box with Type="Number" Does Not Accept Comma in Chrome Browser
Why Does an Anchor Tag's Href Values Need Http:// Preprended to The Url
CSS Make Div Position Fixed Inside Div with Perspective Propertie
How to Set Character Encoding to Utf-8 for Default.HTML
Wkhtmltopdf Not Loading Local CSS and Images
HTML Maxlength Attribute Not Working on Chrome and Safari
How to Include Special Characters in Query Strings
Why Is There a Default Margin on The <Body> Element
Include HTML Files in R Markdown File