Relationship between line box, inline box, line-height, and vertical-align

1. The content area is centered around a box of text, and its height is determined by font-size and font-family. In the chrome controller, you use the mouse to draw a restrained element and display the height value.

2. The height of the inline box is determined by the line-height. Half of the line-height is above the content area, and the other half is below. Line-height is calculated from the vertical line of the content area.
To get the inline box height of the inline element, change the inline element to the inline-block element (do not manually set the height.

3. The height of line box is determined by the highest inline box height or inline-block height.

4. The vertical-align of the inline sub-element is aligned with the line box of the parent element in the inline sub-element embodiment as inline-block.

 

References:

Http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

Http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9% AB %98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

Http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9% AB %98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

Http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8% AE %A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

Http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html

Relationship between line box, inline box, line-height, and vertical-align