Where Does The HTML Body Height Come From?

Just curious, when you give the body a height property and then put a linear gradient on it, it assumes the given height and repeats. If you don’t assign a height, it seems to make the background somewhat 10 pixels tall (at least on Firefox):

body {
  background: linear-gradient(black,white);
}

When adding 100% to height, it makes the background somewhat 20 pixels tall:

body {
  background: linear-gradient(black,white);
  height: 100%;
}

My question is, where do these values come from? They are not related to font size or line height, as I initially believed. The computed tab of the body doesn’t show any computed height.

In case your browser renders this differently, this is what I see on Firefox v129 (Xubuntu):

>Solution :

Default Height Behavior:

1. By default, the body element doesn’t have a specified height. It
   only takes up as much height as its content needs. When you apply a
   linear gradient background without specifying a height, the gradient
   is rendered based on the minimal height that the content within the
   body element requires.
2. This is why you see the gradient appearing as a small strip, often around 10 pixels or so, depending on the browser’s default settings.

Height: 100%:

When you set height: 100% on the body, you are instructing the body element to take up 100% of the height of its containing block, which is usually the html element.
The html element, unless otherwise specified, also doesn’t have a height set, so it too only takes up as much space as its content needs. However, in many cases, browsers might interpret height: 100% on body as taking the height of the viewport.

html, body {
  height: 100%;
  margin: 0;
}
body {
  background: linear-gradient(black, white);
}

The "20 Pixels" Phenomenon:

The increase in height from 10 pixels to 20 pixels when you set height: 100% is likely due to how the browser calculates the height based on the viewport or other containing elements. However, it’s not directly tied to font size or line height but rather how the gradient is rendered over the body element when it tries to occupy 100% of its container’s height.