line-height行高與圖片的隱匿文本間隙消除方法

時間 2019-11-13

標籤 line height 圖片隱匿文本間隙消除方法简体版

原文原文鏈接

（標註文章來源 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/）css

1.塊級元素(block_element)中插入一個內聯塊級元素(inline_block)img後,產生多餘間隙html

（間隙存在緣由說明：對於內聯塊級元素img默認對齊方式是基線baseline, 能夠想象在line-boxes行框盒子中存在出圖片外的匿名inline-box盒子包裹文本。ide

文本存在line-height，因此存在間隙）wordpress

代碼截圖以下：字體

2.消除圖片底部間隙幾種方法spa

a.圖片與底線對齊code

b.圖片元素塊狀化-無基線對齊htm

c.行高足夠小，基線上移blog

d.消除隱匿文本字體大小圖片

源碼

 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>

View Code

【資料參考】

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。