Box Model for Inline Elements

Question

W3C\'s CSS2.1 specification, chapter 8.6 The box model for inline elements in bidirectional context, states:

For each line box, UAs must take the inline b

Answer 1

For the second question you may refer to this part of the specification:

The 'height' property does not apply. 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.)

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

.test {
  margin: 0 10px;
  padding: 20px;
  border: 5px solid blue;
}

div {
 border:1px solid red;
 margin:50px 0;
}

test2test2test2test2test2test2test2 test



test2test2test2test2test2test2test2 test st2test2test2test2 test st2test2test2test2 test st2test2test2test2 test





test2test2test2test2test2test2test2 test2test2



test2test2test2test2test2test2test2 test2test2 test2test2test2test2test2test2test2 test2test2