消除img图片与div下边界之间空白的三种方法

在div中插入图片,图片会和div下方有几像素高的空白,本文介绍了三种消除img图片与容器下边界之间空白的方法。

消除img图片与div下边界之间空白的三种方法
在div中插入图片,图片会和div下方有几像素高的空白,代码如下:

Tips:You can change the code before run.

你可以运行查看!

如何消除图片与div下边界之间的空白?

今天125建站网给大家分享3种简单的解决方法

1、给图片img标签display:block

img{display:block}

2、定义容器里的字体大小为0

div {
  width:110px;
  border:1px solid #000000;
  font-size:0
}

3、定义图片img标签vertical-align:bottom

img{vertical-align:bottom}

设置后效果如下,图片与div下边界之间的空白消失了。
消除img图片与div下边界之间空白的三种方法

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1153.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年2月7日 上午10:25
下一篇 2018年2月8日 上午10:47

99%的人还看了以下文章

  • 阿里云每天营收3888万元,从云服务收入看云计算发展潜力

    据IDC在2017年发布的中国公有云市场份额调研结果显示,前三名分别为阿里云、腾讯云、金山云,市场占有率分别为47.6%、9.6%、6.5%。可以看出,阿里云在国内云计算市场中遥遥领先。

    2018年2月2日
    4.2K0
  • 18个优秀的CSS前端效果代码-网页设计师收藏

    网页设计师收藏的18个优秀的CSS前端效果代码

    2018年2月20日
    4.6K0
  • 网页中的块级元素和行内元素

    块级元素(block-level)在默认显示状态下占据整行,其他元素在下一行中显示。例如,<p>、<h1>、<div>等元素都是块级元素。 行内元素(inline-level,也叫作“内联”元素)与块级元素相反,在默认显示状态下,允许下一个对象与它本身在一行中显示。例如,<strong>、<a>、&…

    2018年7月10日
    4.0K0
  • 你只懂CSS?做前端你还要会 Less、Sass或Stylus

    网站前端开发,CSS是必备的知识,但随着WEB项目越来越大,CSS的预处理越来越重要。 为什么需要CSS的预处理? CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等,要维护我们的CSS,工作会越来越困难,这就需要选择一个预处理工具来编译我们的CSS。 less 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样…

    2018年7月27日
    5.3K0
  • CSS3 制作精美圆角立体button

    CSS3 制作的精美圆角立体button,你可以改变代码,制作出自己需要的颜色和样式的按钮,点击下方运行查看效果。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l…

    2018年2月3日
    4.0K0
  • WordPress“无法将上传的文件移动至wp-content/uploads/”

    今天手机521网站上传图片,无法上传,提示“WordPress“无法将上传的文件移动至wp-content/uploads/”。看图片名称是从网上另存为的带中英文及一长串字符,我改了下文件名,改为小米note3.jpg,不再提示WordPress“无法将上传的文件移动至wp-content/uploads/”,但上传之后无法预览图片,如下图 点击媒体库的图片…

    2018年2月11日
    5.3K0

发表回复

登录后才能评论