1.块级元素中插入一个内联img元素后,产生多余间隙
代码
消除图片底部间隙几种方法
1.图片与底线对齐
2.图片元素块状化-无基线对齐
3.行高足够小，基线上移
4.消除隐匿文本字体大小
源码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 .content {
8 background-color: #ccc;
9 margin-bottom: 5px;
10 font-family: "microsoft yahei";
11 }
12 .vertical_align>img {
13 vertical-align: top;
14 }
15 .elem_block img {
16 display: block;
17 }
18 .content span {
19 display: inline-block;
20 background-color: #F93636;
21 }
22 .line_height_small {
23 line-height: 0;
24 }
25 .box {
26 font-size: 0;
27 }
28 .inlie_block {
29 display: inline-block;
30 }
31 </style>
32 </head>
33 <body>
34 <p class="content ">
35 <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
36 </p>
37
38 <p class="content vertical_align">
39 <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
40 </p>
41
42 <p class="content elem_block">
43 <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
44 </p>
45
46 <p class="content line_height_small">
47 <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
48 </p>
49
50 <p class="content box">
51 <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
52 </p>
53
54 <p class="content inlie_block">
55 <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
56 </p>
57 </body>
58 </html>
CSS深入理解vertical-align和line-height的基友关系
时间： 2024-12-11 01:16:26