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 line-height on inline element
The line height on the block container, (the <p>
element in this case) gives the minimum line height for the lines it contains. So if you want the smaller text to be closer together, you need to avoid setting a large line-height for that. Instead, use the line-heights of the inline elements:
p { font-size: 18px; line-height: 0;}
span.primary { line-height: 2;}
span.secondary { font-size: 12px; line-height: 1;}
---<p><span class="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</span> <span class="secondary">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </span></p>
Why inline and inline-block have different height with the same text content
This is related to how line-height
works and how the height of each element is calculated.
Let's start with a trivial example to highlight the effect of line-height
span {
border:1px solid red;
padding:5px;
line-height:50px;
}
<span>some text</span> <span style="display:inline-block">some text</span>
Line height issue with inline-block elements
The line-height
is applying but you need to understand how it's applying. If we refer to the specification:
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element
By setting line-height:5
on the parent element you set a minimum height for the linebox.
On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.
By setting line-height:1.5
you defined the height of your element inside the linebox.
To make it easier, you have an element with a height equal to 1.5
inside a linebox with a height equal to 5
1 but you cannot visually see this. If you inscrease the line-height of child and you reach 5
you will then reach the minimum height and you will start increasing the linebox previously defined by the parent element.
To see this you need to apply vertical-align
. If the line height of child element is smaller than the line height of the parent (the height of the child smaller than the height of the linebox) you can align:
.container {
max-width: 200px;
border: 2px black solid;
line-height: 5;
}
.container>a {
line-height: 1.5;
}
<div class="container">
<a>First</a>
<a style="vertical-align:top;">Second</a>
<a>Third</a>
<a style="vertical-align:bottom;">Fourth</a>
</div>
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 are there extra 2px added to the line-height of a block container that contains inline-elements?
The line-height of the container should be size of the font-size, i.e. 16px
No it's not. You never set the line-height
of the parent so the default value will apply which is around 1.2
. It can be different in some case but for sure bigger than 1
in all the cases so bigger than the defined font-size
Set an explicit line-height
and you will get what you want:
.link {
background-color: red;
font-size:16px;
line-height:1; /* or any pixel value */
}
.link span {
background-color: royalblue;
font-size:16px;
}
<div class="link">
<span>textg</span>
</div>
How to determine height of content-box of a block and inline element
For block elements its quite easy but you need to distinguish between two different cases. When we have an IFC (inline formatting context) or BFC (block formatting context). From the specification you can read
If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders:
The element's height is the distance from its top content edge to the first applicable of the following:
- the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
- the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
- the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
- zero, otherwise
Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset)
If we consider an IFC then the line boxes will define our height exactly like your examples where in the div
and p
you have one line box defined by the line-height.
If we consider a BFC then the (2) and (3) apply. Here, you can see it as a recursive definition because having a BFC means we have other blocks inside and those blocks will follow the same rules (either BFC or IFC and so on). In addition, we consider the margin collapsing rules to get the final height.
If the block is empty then it's zero.
Of course, this consider the case of height:auto
. If you explicitely set a height then it's trivial.
For inline elements you can refer to this part of the specification:
The 'height' property does not apply. 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.)
Here is a bit tricky but the rule is simple: you cannot control or set the height of the content area. Only the font properties you will be using will define the final height.
You should also note that the content area is different from the line box.
The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.
<span style="background-color: aquamarine; font-size: 16px; line-height: 2em;">Is line-height same as height of span tag?</span>
<br>
<span style="background-color: aquamarine; font-size: 16px; line-height: 4em;">Is line-height same as height of span tag?</span>
<br>
<span style="background-color: aquamarine; font-size: 16px; line-height: 8em;">Is line-height same as height of span tag?</span>
Line height on inline-block div pushing down other inline-block siblings
The line-height
is affecting all other siblings becuase they have display: inline-block
applied to them, meaning they should be 'inline' with each other.
When setting a line-height
it's increasing the line height for all elements sharing the same line; if you were to change your .item
css display
property to a block level element you will notice the line height will then not affect it's siblings as they don't share the same 'line'.
How to control line height in p styled as inline
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal height of line boxes within the element.
https://developer.mozilla.org/en/CSS/line-height
what you can do:
- set
line-height: 0px;
on the wrapping<div>
element - set
display: inline-block;
on the inner<p>
- float the inner
<p>
Related Topics
How to Support Placeholder Attribute in Ie8 and 9
How to Draw a Trapezium/Trapezoid with CSS3
CSS Side by Side Div's Auto Equal Widths
Customizing Increment Arrows on Input of Type Number Using CSS
What Is the Meaning of ? (Question Mark) in a Url String
How to Allow <Input Type="File"> to Accept Only Image Files
Border Style Do Not Work with Sticky Position Element
Angular 5 Formgroup Reset Doesn't Reset Validators
Multiple Radio Button Groups in One Form
Is Type="Text/Css" Necessary in a ≪Link≫ Tag
Scale Image to Fit a Bounding Box
Are Empty HTML5 Data Attributes Valid
Easier Way to Create Circle Div Than Using an Image
Removing Ul Indentation with CSS
How to Fill a Div with an Image While Keeping It Proportional