0

If you look at this codepen https://codepen.io/anon/pen/pwQrmm 

`h2 {
  padding-top:16px;
  padding-bottom:16px;
  font-size: 16px;
}`

the h2 tag is set to have 16px in font-size but the height of its content box is 18px. Is there a way to set the height on the content box to match the font-size without manually setting its height with height: 16px. Also when the h2 tag becomes two lines, the content box should become 32px.

I tried searching this problem but couldn't find any answers. I'm sorry if this has been answered before.

Embedded_Mugs
  • 2,132
  • 3
  • 21
  • 33
  • What do you mean by 'content box'? – Amoliski Jul 10 '17 at 16:42
  • Is the inner most box that contains the text of an element. It appears as the blue box when you inspect in chrome dev tools. [More info here](https://www.w3schools.com/css/css_boxmodel.asp) – Embedded_Mugs Jul 10 '17 at 16:44

1 Answers1

3

You can set line-height to match font-size.

line-height: 16px;

When you write enough content (so there will be a second line), it'll become 32px.

However this isn't suggested. The content will become too crowded, the text will be too close to the text above (and below). Line-height should be between 1,2x-1,5x of text-size.

Phoenixy
  • 104
  • 1
  • 14
  • The content area of a div may be higher then the line-height though, see https://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced or https://stackoverflow.com/questions/28363186/inline-elements-and-line-height – Adam Apr 25 '23 at 13:26