消除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%的人还看了以下文章

  • css实现圆角矩形、半圆、圆形效果—border-radius使用详解

    传统的圆角矩形实现,必须使用多张图片作为背景图案。CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了。 css实现圆角矩形、半圆、圆形效果的优点: * 减少维护的工作量,不再需要使用图片。 * 提高网页性能,网页的载入速度将变快。 * 增加视觉可靠性。某些情况下,背景图片会下载失败,CSS3就不会发生这种情况。   b…

    2018年2月3日
    14.4K0
  • 未来将消失的十大职业,有没有你从事的工作?(必看)

    科技发展日新月异,有些原来难已想象的事情早已变成现实,无人驾驶,机器人技术,3D打印……未来几十年新技术的发展必然会给生活带来重大的影响。 未来将消失的十大职业之一:司机 无人驾驶技术的发展,会让司机、驾校和交警消失。 未来将消失的十大职业之二:银行柜员 线下支付的方法已经成为潮流,现在出门也不必带现金和钱包,仅靠一部手机就能够走到许多地方,到银行柜台办业务…

    2020年2月11日 未分类
    4.6K0
  • DIV+CSS自适应布局:三列布局

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

    2018年2月20日
    5.7K0
  • css语法及命名规范(入门)

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

    2018年7月10日
    2.8K0
  • 网页中的块级元素和行内元素

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

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

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

    2018年2月11日
    5.2K0

发表回复

登录后才能评论