I know that an inline box does not occupy whole width. It only takes required width. While referring a book on CSS, I learned that an Inline Box consists: Content Area (which is equal to em boxes stacked next to each other horizontally) + Leading (which itself is equal to sum of Top and Bottom leading). The height of this box is the Line height. Inline Box Diagram
For Line Box, the diagram shown is this: Line Box Diagram
My main concern here is the definition of vertical-align says that (as per MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) "..vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements."
Another use case says: ".....To vertically align an inline element's box inside its containing line box."
Here the last bold term is very confusing to me. I am not able to make sense out of it and not able to visualize what these two definition says. Can any body help me with this?
