inline-level elements
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). Several values of the ‘display’ property make an element inline: ‘inline’, ‘inline-table’, ‘inline-block’ and ‘run-in’ (part of the time; see run-in boxes). Inline-level elements generate inline boxes.
padding and border segments starts at the edges of the content area. These segments may overlap other boxes.
Only the ‘line-height‘ is used when calculating the height of the line box.
Style the yellow box with:
line-height: 0;