How to Determine Height of Content-Box of a Block and Inline Element

.container {
  background-color: red;
  margin:5px;
  white-space:pre;
}

<div class="container"><div style="display: inline-block;"></div></div>

<div class="container"><div style="display: inline;"> </div></div>

Inline elements and line-height

This might be confusing because in the inline formatting model there are different heights.

Height of an inline box

An element with display: inline generates an inline box:

An inline box is one that is both inline-level and whose contents
participate in its containing inline formatting context. A
non-replaced element with a display value of inline generates an
inline box.

And line-height determines the height of that box:

The height of the inline box encloses all glyphs and their
half-leading on each side and is thus exactly 'line-height'

Therefore, your box is, in fact, 15px tall.

Height of a line box

There are also line boxes:

In an inline formatting context, boxes are laid out horizontally, one
after the other, beginning at the top of a containing block.
Horizontal margins, borders, and padding are respected between these
boxes. The boxes may be aligned vertically in different ways: their
bottoms or tops may be aligned, or the baselines of text within them
may be aligned. The rectangular area that contains the boxes that form
a line is called a line box.

The height of a line box is determined by the rules given in the
section on line height calculations.

In case a line box only contains non-replaced inline boxes with the same line-height and vertical-align, those rules say that the height of the line box will be given by line-height.

So in your case, this is also 15px.

Height of the content area of an inline box

However, the developer tools of your browser said 18px. That's because those 18px are the height of the content area. It's also this content area (together with paddings) which is painted by the green background.

Note those 18px might vary because CSS 2.1 doesn't specify an algorithm:

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.)

If an UA implements the first suggestion, the content height will be given by font-size, which determines the em-box. This would what you expected, with the green box being 15px tall.

However, most UAs don't seem to do that. That means that, probably, the height will be the height of the tallest glyph in the font-family and font-size used.

But using a font-size value of 15px doesn't mean that the tallest glyph will be 15px tall too. That depends on the font. This is somewhat analogous to normal, the initial value of line-height, which is defined as

Tells user agents to set the used value to a "reasonable" value based
on the font of the element[...]. We recommend a used value for
'normal' between 1.0 to 1.2.

That means that, if you use font-size: 15px, a "reasonable" line-height would be between 15px and 18px. In the "Verdana" font, Firefox thinks the best is 18px; in the "sans-serif", it uses 17px.

Box Model for Inline Elements

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;}

<div><span class="test">test2test2test2test2test2test2test2 test</span></div>
<div><span class="test">test2test2test2test2test2test2test2 test st2test2test2test2 test st2test2test2test2 test st2test2test2test2 test</span></div>


<div><span class="test" style="line-height:50px;">test2test2test2test2test2test2test2 test2test2</span></div>
<div><span class="test" style="line-height:50px;">test2test2test2test2test2test2test2 test2test2 test2test2test2test2test2test2test2 test2test2</span></div>

function lh(ascender, descender, unitsPerEm, fontSize) {
  return (ascender + Math.abs(descender)) * fontSize / unitsPerEm;
}

LayoutUnit ComputedStyle::ComputedLineHeightAsFixed() const {
  const Length& lh = LineHeight();
  // Negative value means the line height is not set. Use the font's built-in
  // spacing, if avalible.
  if (lh.IsNegative() && GetFont().PrimaryFont())
    return GetFont().PrimaryFont()->GetFontMetrics().FixedLineSpacing();

 float line_gap = SkScalarToFloat(metrics.fLeading);
  font_metrics_.SetLineGap(line_gap);
  font_metrics_.SetLineSpacing(lroundf(ascent) + lroundf(descent) +
                               lroundf(line_gap));

.large {  font-size: 50px;  line-height: 1;}
.overflow {  overflow: hidden;  border:1px solid green;}
body > div  {  margin:20px;  outline:2px solid red;}

<body>  <div class="overflow large">    Testing: pPgG  </div>  <div>    <span class="overflow large">        Testing: pPgG      </span>  </div></body>