Is it possible to change inline text height, not just the line-height?
You won't be able to change the height of the font alone but you can adjust the font-size
to work with the line height you have set.
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>
How do you decrease the line height when line-height does nothing?
I'm trying to change the line spacing to be single-spaced for the summary text in the span
The span has display: inline
, line-height does not work for inline elements.
I think the idea is that if you had a inline element in a block of text the CSS spec assumes you wouldn't want to have one line with a different line-height than the rest, so it doesn't allow you to set line-height. For example, if you had
<p>lorem ipsum.
Sed ut <em>perspiciatis unde</em>
ut aliquid ex
ea commodi consequatur? </p>
it would be weird if the second line had a different line-height than the rest.
Important note: line-height is not the only thing that doesn't work for inline elements. Read more at CSS display: inline vs inline-block
If you know the answer to the question I'd also be very interested in how you got that answer. Unlike regular code, when I have CSS problems I have no idea how to debug them, besides googling and flailing around trying random things until it works.
When a commenter tried to answer the question I googled around some more and eventually ran into the stackoverflow answer about inline elements. If I run into problems in the future I should add in the html element I'm having trouble with. For example, a "span line-height not working" google search query would have answered my question in the second result. So unfortunately the strategy basically remains "googling and trying random things" but to be fair you could say that's pretty much what debugging is. Or you could say "researching and experimenting with educated guesses" if you wanted to be fancy.
Why can't I decrease the line-height of this text?
Because the em
tag is inline and its line-height cannot be lower than its parent div
.
For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em
tag to 10px as well.
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).
font-size and line-height set, but changing font still makes an element's height change
I ended up solving my own problem (to an acceptable extent) by simply tweaking with the font family and size until it worked for me:
body { font-size: 15px; line-height: 1.2;}
body, .same-font { font-family: Helvetica, sans-serif;}
code { font-family: Menlo, Courier New, sans-serif; font-size: 0.9333em; /* 14/15 */ line-height: 1.28571; /* 18/14 */}
<ul> <li>Without any code - 18px height.</li> <li>With <code>code</code> - 18px height.</li> <li>With <code class="same-font">code.same-font</code> - 18px height.</li></ul>
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
.
Related Topics
Css: How to Target ::Slotted Siblings in Shadow Dom Root
Sass Mixin Error for Ie Specific Filters Like -Ms-Filter
Internet Explorer 11 and Supported Web Fonts
Twitter Bootstrap Remove Table Row Highlight with Row Stripes
How Often Is the Default Font Size in the Browser Not 16Px
CSS - Vertically Center an Image Within a Floated Div
Css/Js Bundle in Single File in MVC When Publish with Release Option
Rails Assets Not Precompiling, CSS Looks Different in Production
CSS Transition Doesn't Work in Firefox When Position Is Changed
Z-Index Behaviour on Pseudo Elements
Using an Data Uri Svg as a CSS Background Image
What Is the Correct Usage of CSS Attr Function
Css: How to Attach an Arrow to a Div and Make It Overlap the Border