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

daochaozho

daochaozho

2016-02-19 22:12

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享CSS解决图片下面有空隙的简单方法,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

  在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,本文给出了最为简单的解决方法。

  解决方法:在图片的css中加 vertical-align:bottom; 效果


      

  演示代码: 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  !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
    liimg src="图片地址1" //li
    liimg src="图片地址2" //li
    liimg src="图片地址3" //li
    liimg src="图片地址4" //li
   /ul
  /div
  /body
  /html

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

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

Web开发
CSS实战:解决图片下面有空隙的简单的方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

PHOTOSHOP图片祛斑简单方法

PS PS教程
PHOTOSHOP图片祛斑简单方法

退烧的简单方法

宝宝 育儿
退烧的简单方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

龟头下面有颗粒是什么

生活常识
龟头下面有颗粒是什么

丰胸的简单方法

丰胸
丰胸的简单方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows 7如何关闭系统保护?

Windows 7如何关闭系统保护?

Javascript实例教程(20-7)

Javascript实例教程(20-7)
下拉加载更多内容 ↓