Demo1 case: img element bottom gap problem

<div class="demo1">
	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" />
</div>
Copy the code
.demo1 {
	background-color: #20B2AA;
}

img {
	width: 200px;
}
Copy the code

Note: There is a certain height gap at the bottom of the picture

Solutions:

.demo1 {
	background-color: #20B2AA;
	font-size: 0;
}

img {
	width: 200px;
}
Copy the code

Font-size: 0px Clear the bottom gap

.demo1 {
	background-color: #20B2AA;
}

img {
	width: 200px;
	vertical-align: bottom;
}
Copy the code

Method 2: Set vertical-align: bottom for the inline block element (recommended)

2, Demo2 case: img element center height inconsistency between the upper and lower white

<div class="demo2">
	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg">
 	<! -- Placeholder elements added later to solve the problem -->
	<div></div>
</div>
Copy the code
.demo2 {
	width: 400px;
	height: 200px;
	line-height: 200px;
	background-color: #CCCCCC;
}

img {
	height: 190px;
	vertical-align: middle;
}
Copy the code

Note: the upper and lower gaps of the picture are not symmetrical

Solutions:

.demo2 {
	width: 400px;
	height: 200px;
	line-height: 200px;
	background-color: #CCCCCC;
	/* 1, font-size: 14px; Inline elements are vertically aligned */
	font-size: 0px; 
}
Copy the code

Font-size: 0px Inline element vertical alignment to parent element

.demo2 {
	width: 400px;
	height: 200px;
	/* line-height: 200px; * /
	background-color: #CCCCCC;
}

.demo2 div {
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
Copy the code

Method 2: Remove the parent element’s row height, add a child element with the same height as the parent element, and setvertical-align: middle

Note:

  1. Sibling elements affect the parent element’s baseline, which is required for image positioning
  2. The parent element’s baseline is affected by vertical-align
  3. Font size of the parent element
  4. Line-height of the parent element
  5. Alignment of a child element

3. Demo3 case: misplacement of block elements in a row

<div class="d3"></div>
<div class="d3 d3b">X</div>
Copy the code
div.d3 {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: #9ACD32;
}
Copy the code

Note: The baseline of an inline element is the bottom of the element if there is no text, and the baseline position of the inner text if there is text

Solutions:

.d3b {
	overflow: hidden;
}
Copy the code

Note: Add overflow: hidden to the second element that contains text, and the element will no longer appear misplaced

4. Demo4: Text & inline block elements are vertically centered

<div class="demo4">x
	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" class="img_">
	<! -- Element added to achieve vertical center -->
	<div></div>
</div>
Copy the code
.demo4 {
	width: 400px;
	height: 200px;
	background-color: #ADD8E6;
}

.demo4 img {
	width: 320px;
	height: 180px;
	vertical-align: middle;
}
Copy the code

Note: Child elements are not centered relative to parent elements

Solutions:

.demo4>div {
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
	background-color: bisque;
}
Copy the code

Note: The line element baseline is the bottom of the element if there is no text, and the line element baseline is the inner text if there is text.

Demo5: Text affects the baseline alignment of elements

<div class="demo5">
	<div></div>
	<div>x</div>
</div>
Copy the code
.demo5 {
	display: inline-block;
	/* Affects alignment */
	font-size: 0px;
	background-color: #AAAAAA;
}

.demo5>div {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: #FF1493;
}
Copy the code

        

Figure 1: Dislocation

Figure 2: Ideal stateCopy the code

Font size: 0px; font-size: 14px; The second box inherits the parent element’s row height, which is higher than the element’s height, so it squeezes out the box, while the first box aligns with the parent element’s baseline, which is pulled down by the second box.