消除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)
江山如画的头像江山如画管理团队
第四章 数据库应用开发案例2
上一篇 2018年2月7日 上午10:25
animation动画详解:制作颜色不停变化的正方形
下一篇 2018年2月8日 上午10:47

99%的人还看了以下文章

  • 综合实训-制作动态JSP企业网站

    综合实训-制作动态JSP企业网站综合实训-制作动态JSP企业网站综合实训-制作动态JSP企业网站综合实训-制作动态JSP企业网站

    [上机目的与要求] 综合运用所学相关知识,设计和开发企业网站。 [上机重点与难点] 项目开发的步骤、MVC设计模式的使用,前后端开发对接。 [上  机  方  法]     由指导老师演示和指导,学生亲自上机操作。 [上  机  内  容]    制作动态JSP企业网站 网站目录管理示例一: 网站目录管理示例二: 撰写文章示例一: 撰写文章示例二:

    2019年11月16日 • 未分类
    17.6K0
  • css语法及命名规范(入门)

    css语法规范: 每条属性声明占一行,增加易读性 /*bad*/ body{margin: 0;padding: 0;} /*good*/ body{ margin: 0; padding: 0; } 颜色采用十六进制写法,并尽量简写: /*bad*/ .example{ color: #ffaabb; } /*good*/ .example{ color:…

    2018年7月10日
    6.5K0
  • 阿里云每天营收3888万元,从云服务收入看云计算发展潜力

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

    2018年2月2日
    7.1K0
  • animation动画详解:制作颜色不停变化的正方形

    讲解CSS3 animation动画属性,并通过实例《制作颜色不停变化的正方形》演示animation的使用。

    2018年2月8日
    6.4K0
  • 你只懂CSS?做前端你还要会 Less、Sass或Stylus

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

    2018年7月27日
    11.4K0
  • DIV+CSS自适应布局:三列布局

    自适应布局允许网页宽度或高度自动调整,以获得良好的用户体验。自适应布局有高度自适应和宽度自适应,本文讲解了三列布局,学会三列自适应布局,两列自适应布局的原理一样。

    2018年2月20日
    15.7K0

发表回复

登录后才能评论