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>

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

解决CSS下img图片多余空白或者是表格中有空隙Bug的方案

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

div+css排版图片IMG下边界有空隙

做页面div+css排版的时候经常会遇到li包含img时,图片文件的下边缘出现大概5个或10个像素的间隙,找了很多办法都去不掉,遇到这样的情况,没办法只能想绕道走了。要么把图片当成背景来用,给相应的容...
  • fer_ba
  • fer_ba
  • 2013年03月29日 11:33
  • 901

PNG图片IE6下面解决最好的方法

  • 2013年03月23日 15:41
  • 273KB
  • 下载

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

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

父级元素的 font-size:0 解决子代的inline或inlien-block的换行或图片空隙问题

参考:http://blog.csdn.net/lihchweb/article/details/74654154 1. 比如在写如下代码的时候: ul> li>我是第一项li> ...

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

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

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

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

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

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

css如何去掉inline-block之间的空隙

最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。对于inlin...

img图片在ie下有有空隙

  • 2012年08月22日 11:37
  • 451B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS解决图片下面有空隙的简单方法
举报原因:
原因补充:

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