css属性vertical-align

Front-End
css

先上图，图片下方的留白怎么产生的？
vartical-space
不管你怎么设置元素的padding,还是margin，空白依然存在。
代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style>
		* {
		  padding: 0;
		  margin: 0;
		}

		div {
		  width: 300px;
		  background-color: white;
		  border: 1px solid red;
		  display: inline-block;
		  margin: 50px 50%;
		  padding-bottom: -30px;
		  transform: translateX(-50%);
		}

		img {
		  max-width: 100%;
		}
		p{
		  border:1px solid red;
		  width:500px;
		  margin:0 auto;
		  background-color:#ddd;
		  /*line-height: 160px;*/
		}
		span{
		  background-color:red;
		  color:white; 
		  font-size:84px;
		  /*vertical-align:middle;*/
		}
		
		p img{
		   /*vertical-align:middle;*/
		}
		b{
		  /*vertical-align:middle;*/
		  font-size:62px;
		  background-color:blue;
		}

	</style>
</head>
<body>
<div> 
 	<img src="http://ww1.sinaimg.cn/mw1024/7f4539c1jw1et2wws33khj20zk0qoadq.jpg" alt="">
</div>
<p>
	<span>xgf</span>
	<img src="http://www.w3school.com.cn/i/eg_cute.gif" alt="">
	<b>axxegff</b>
</p>
</body>
</html>

需要明白的几点：

  1. vertical-align只会在display为inline,inline-block的元素上生效。
  2. 一行中可能会放多个行内元素，改行行高由行中line-height最大的那个哪个元素决定。
  3. 元素的line-height由字体大小及line-height属性决定。
  4. line-heigh属性会继承。

先来了解一下网页中关于字体与行高的各种概念链接

  1. 行内元素的基线为字母e的底线，注意与字母g比较。
  2. 行中存在一个行框（虚拟的但又确实存在的东西）。元素的background-color，border，outline并不能将其显示出来。

一行中的基线与行内元素基线
行的基线为该行行高最高元素的基线，默认情况下行中的元素的基线与行的基线在同一水平线上。
如下：
vertical-defaut

  • 为行中非决定行基线的元素（不是最高的那些元素）设定vertical-align值为middle，text-top，text-bottom是则该元素的中线，字体顶部，字体底部将分别与行的基线对齐（也就是与最高元素的基线对齐）。当值为top，bottom时元素的顶部，底部将分别与行的顶部，底部对齐（不是基线了）。
    如图1：
    vertical-1
    图中设置img的vertical-align:middle，b的vertical-align:text-top。
    如图2：
    vertical-2
    图中设置img的vertical-align:top，b的vertical-align:bottom。
  • 当为最高元素（决定行基线的元素）设定vertical-align属性值时（p元素没有指定行高），如值为middle，text-top,text-bottom;会将行的基线也改为元素的vertival-align值。如值为top，bottom时，如果再设置其它元素的vertical-align值，其它可能会变为改行的最高元素。
    如图1：
    vertical-3
    图中设置了span的vartical-align:middle；
    如图2：
    vertical-4
    图中设置了p的line-height:160px；

总结：
当父元素，最高元素设置了line-height时，要理清元素对齐方式还真不那么简单。不过vertical-align基本只是用于图片与行内文本居中的情况。图片中空白是由浏览器渲染模型造成的，可以设置vertical-aign：middle，或者设置div元素的font-size：0。