On spacing elements inline

We often meet the spacing between the images appear problem, starting from this issue, summarized under the principle.

Any elements not visible block elements are inline elements, its performance characteristics are "line layout" form. ---- "CSS The Definitive Guide"

Pictures of text and other inline elements default alignment and it is the parent's baseline were aligned distraction height is the overall height of the element (bottom line)

solution:

1, into block-level elements, because the problem will occur only inline elements;

2, the default property vertical-align is the baseline, with baseline set as long as the property is not the same, this problem can be avoided;

3, the inline element Floating because there was not in the current flow of the document, the natural layout of the time, will not refer the text to be aligned;

4, the font size of the parent element is set to 0, since you to align the baseline of the text, the text is provided not directly, and not so positioned.

 

line-height and height at the same height, why down the middle?

By default, if there is no interference from other factors, the text is a content area box package, its size has a font size of the decision, this time the content area box size and line box is the same as setting line-height property after that, there will be treated as follows:

1. Obtain the half line spacing: half line spacing = (line-height-content area box (i.e. font size)) / 2.

2. Then the half-line spacing in the content area box are placed upper and lower sides, thus obtaining the height dimension of the line box. So long as the line of another job may generate a set height, and the text is center.

 

If the element is floating (float: left / right), the absolute positioning (position: absolute / fixed) or is the root element (html), then it is called an element of the outer stream (out-of-flow). If the outer element is not a flow element, then it is called an element (in-flow) in the flow.

 

margin inline elements and padding properties, padding-left horizontal direction, padding-right, margin-left, margin-right margin results are generated; however, the vertical direction padding-top, padding-bottom, margin-top, margin -bottom no margin effect.

 

vertical-alignPercentage values are not relative to the font size or whatever property calculations, but with respect to the line-heightcalculation.

{
  line-height: 30px;
  vertical-align: -10%;
}

// 相当于

{
  line-height: 30px;
  vertical-align: -3px;    /* = 30px * -10% */  
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Original: https://www.jb51.net/html5/518714.html

http://www.softwhy.com/article-4133-1.html

https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/