首页 > 代码库 > line-height行高与图片的隐匿文本间隙消除方法
line-height行高与图片的隐匿文本间隙消除方法
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的基友关系
line-height行高与图片的隐匿文本间隙消除方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。