1

enter image description here enter image description here

JSFiddle :https://jsfiddle.net/cs2tegy1/

As you can see, the content of inline item (<span>) are inside green box.My question is where is height of the box from . Firstly it is not the height property which is not applicable to inline at all. Secondly ,it is not line-height as well ,the only thing it affect is that space between the boxes.

So, where is the height from?

zer00ne
  • 41,936
  • 6
  • 41
  • 68
Guichi
  • 2,150
  • 1
  • 19
  • 27
  • 1
    Provide the complete example (html/css). You can use snippet for that or jsfiddle for example. – Dekel Dec 05 '16 at 00:39
  • @Dekel The question is quite simply. Here is jsfiddle https://jsfiddle.net/cs2tegy1/ – Guichi Dec 05 '16 at 00:43
  • 1
    The `height` of inline-styled elements is based on their content (and not based on their container), if thats what you are asking. – Dekel Dec 05 '16 at 00:46
  • @Dekel I think the height of green box is determined by `height` rather than `line-height`. And for now ,it seem to me that the `height` is affect by "content" and `padding` implicitly.Setting `height` directly just can not work.Still not sure how the `height` is calculated – Guichi Dec 05 '16 at 01:02
  • @Dekel Also,I am really struggling a way to make `line-height` visible in browser – Guichi Dec 05 '16 at 01:05
  • Note that for inline elements the `line-height` will not affect the background-color (but only the padding between the lines): https://jsfiddle.net/eqg3evur/ – Dekel Dec 05 '16 at 01:09
  • @Guigui, what browser version do you use? I have tried your snippet and `line-height` actually changes the height of the span. – Siavas Dec 05 '16 at 01:10
  • @Siavas ,you mean the `line-height` change the height of "green box",this is definitely not true for chrome – Guichi Dec 05 '16 at 01:11
  • I think I understand what you mean now, Guigui. Taking from @Dekel's explanation, is this the result you're looking for? https://jsfiddle.net/eqg3evur/1/ – Siavas Dec 05 '16 at 01:13
  • @Siavas ,I am just following a tutorial and come up some question myself http://book.mixu.net/css/2-box-model.html – Guichi Dec 05 '16 at 01:15
  • @Siavas, I think he wants an explanation (and not a solution). – Dekel Dec 05 '16 at 01:15

3 Answers3

1

line-height:normal is the default, which is about 1.2xfont-size for the major browsers. Look in the Computed Style tab.

On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.

See https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

That span is a non-replaced inline element and it's height defaulted to auto (which is irrelevant, since height doesn't apply to it unless it was anything but inline) it defers to line-height of about 1.2.

In the case of a line which contains only inline non-replaced elements which are all the same font-size and line-height, and all of which have the same vertical alignment, the solution is simple. The content-area is defined by the font-size of the elements, and the height of the line-box is equal to the value of line-height.

http://meyerweb.com/eric/css/inline-format.html

enter image description here

Sorry, 16px x 1.2 = 19.2px

zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • `line-height` can not increase the height of the box ,which is a surprise to me (maybe you as well) – Guichi Dec 05 '16 at 00:49
  • What is this *"box"* you speak of, sir? You haven't provided any code. – zer00ne Dec 05 '16 at 00:50
  • By "box", I mean the green one – Guichi Dec 05 '16 at 00:51
  • On non-replaced inline elements, line-height specifies the height that is used to calculate line box height. That span is a non-replaced inline element. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height What is the font-size? – zer00ne Dec 05 '16 at 00:52
  • 1
    I think the height of green box is determined by `height` rather than `line-height` and for now ,it seem to me that the `height` is affect by "content" and `padding` implicitly.Setting `height` directly just can not work – Guichi Dec 05 '16 at 01:00
  • No, it's `line-height`, see the update. – zer00ne Dec 05 '16 at 01:22
  • Thanks for you help ! But my question is to how the "height of green area" is calculated, rather than how the `line-height` is calculate .What is more ,"height of green area" is **not** the same as `line-height` for sure.Just set the `line-height` and you will notice that the "green box height" will not be changed at all – Guichi Dec 05 '16 at 02:33
  • If the green-box is your only concern that would be content-area determined by font, and padding. – zer00ne Dec 05 '16 at 02:42
  • After I check your answer more closely ,I suppose this answer is wrong and thus misleading to others.You use the rule to get "green area" 19px and run the number to say `line-height` is also 19px .But I believe it is just an incidence. We can not conclude that "green area" is determined by `line-height`.Please update this answer – Guichi Dec 05 '16 at 02:53
  • I suppose the `line-height` calculate to the `content height` (which is based on `font-size`) by default.But `line-height` is subject to change while `content height` is fixed because it is derived from `font-size` – Guichi Dec 05 '16 at 03:02
  • If you specify **content-area** because that's what you meant, I would adjust accordingly. I see a span with a green background, not a "green-area". You say "I think the height of green box is determined by height" is that the property height or a "green height"? – zer00ne Dec 05 '16 at 03:08
  • All measurements are subject to change, and content area is not a constant due to the fact font-family has variations in ascenders and descenders as @Johannes stated. – zer00ne Dec 05 '16 at 03:11
  • "height measured by ruler" === "Iine-height calculated by 1.2 * font-size" is kind of misleading. My first reaction is that the "green height" is from `line-heigh` ,that is why they are equal – Guichi Dec 05 '16 at 03:15
  • When I said "green height", I was being facetious. "green anything" is misleading if you already have specific terms to coincide what you mean. – zer00ne Dec 05 '16 at 03:19
1

it's just the font-size (and height), including the space for the ascenders and descenders of letters like j, Q, p T F etc. (which can be different for every font)

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

From the conversation in comments, I understand your question is how the height of the green box/area is being calculated.

This area is not calculated by either height or line-height attributes. This area is, without any padding, the minimum area which covers all the letters in the span element - which is actually the font-size of your text.

Adding a border or padding to the span, it will make the green area bigger by that size.

Siavas
  • 4,992
  • 2
  • 23
  • 33