CSS解决图片下面有空隙的简单方法

原创 2016年06月02日 12:51:51
 在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,本文给出了最为简单的解决方法。解决方法:在图片的css中加 vertical-align:bottom; 效果
CSS解决图片下面有空隙的简单方法


      

演示代码: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解决图片下有空隙</title>
</head>
<body>
<style>
*{margin:0px;padding:0px;}
#l1 {float:left;background:#000;padding:20px;margin:50px;}
#l1 ul li {list-style:none;}
#l1 ul li img {vertical-align:bottom; display:block;}//消除下面的空隙
</style>
<div id="l1">
   <ul>
    <li><img src="图片地址1" /></li>
    <li><img src="图片地址2" /></li>
    <li><img src="图片地址3" /></li>
    <li><img src="图片地址4" /></li>
   </ul>
</div>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

IE6下div图片下边4px空隙bug的解决办法

IE6下图片下边有空隙的解决方法网上已经有很多种解决办法了,我今天同大家一起复习一下那些办法,并提供一些新的方法供大家参考。  下面请先看一下出现问题的代码:  IE注释bug ...

列表和插入图片时空隙的解决(产生于低端浏览器)

如果没有看过上一篇文章的读者,可以先看一下:你问我答(34)——破解缝隙之谜 蓝月指出,如果在div标记和img标记的尖括号都连起来写,不加空格,就不会出现这个缝隙了。例如这样写(请注意img标记的...

图片下面出现空白4像素BUG的常用解决方法归纳

在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的,对于该问题的解决方法也是“见机行事”,根据原因的不同要用不同的...

带进度条的WebVeiw实现以及进度条和webview之间有空隙的解决方法

带进度条的WebVeiw实现以及进度条和webview之间有空隙的解决方法给WebView顶部添加加载进度条是非常常用的功能,实现方法也很简单,主要有两种方案:解决思路 在布局文件里直接添加Progr...

img图片在ie下有有空隙

  • 2012-08-22 11:37
  • 451B
  • 下载

算法习题23:用最简单, 最快速的方法计算出下面这个圆形是否和正方形相交

用最简单, 最快速的方法计算出下面这个圆形是否和正方形相交。"    3D坐标系 原点(0.0,0.0,0.0) 圆形: 半径r = 3.0 圆心o = (*.*, 0.0,...
  • ylf13
  • ylf13
  • 2013-10-20 13:30
  • 1326
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)