Why when setting height:100% and position: absolute, .test2 became 200px instead of 204px? – Html

I have figured out the problem and will only explain why the space below appears. The size of the absolutely positioned element will automatically adjust after this. What I highlighted are quotes from the specification.

The issue is that since div.container is a block element container with only inline-level elements inside, a new inline formatting context is created for its content, here's how it's explained: An inline formatting context is established by a block container box that contains no block-level boxes. One of the characteristics of this formatting is that all inline-level boxes on one line are combined into a line box: The rectangular area that contains the boxes that form a line is called a line box. Vertical-align property applies to inline-level elements and its default value is baseline: Align the baseline of the box with the baseline of the parent box. And in our case, this default alignment is being used. In this case, the baseline of our div.test is aligned relative to the baseline strut of the parent block container element. Here's an explanation of how alignment works relative to the baseline: ...only have meaning with respect to a parent inline element, or to the strut of a parent block container element. The baseline for an inline-block without content, which is what our div.test is in this case, is the bottom margin edge: The baseline of an 'inline-block' is the baseline of its last line box ...... in which case the baseline is the bottom margin edge. After alignment, the relative baseline height of the line box becomes slightly higher than our div.test, this means that the height of the line box in this case depends on two things: the height of the div.test, which is determined in this case by for replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box, and the empty space below, which is explained as ...it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up), as a result, the height of div.container becomes: ...distance between the top of the topmost line box and the bottom of the bottommost line box, in this case, it is exactly the line box of our div.test.

If set vertical-align: top or bottom, the space below in the line box disappears. This is because these values align with respect to the line box: ....values align the element relative to the line box, and as a result, the space below that was created as a side effect of baseline alignment disappears.

Also, you can notice that if you write at least one character in div.test, then vertical-align: baseline starts working differently, and the baseline of div.test becomes: ...baseline of its last line box, so the space below automatically disappears.