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

  • 网页中的块级元素和行内元素

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

    2018年7月10日
    4.7K0
  • 让网页中视频、图片居中的CSS代码

    网页制作时,文章内容中的视频和图片,如何居中对齐? 文本有text-aglin:center; 但这对视频和图片是无效的。 解决方法:我们可以把对象设置成块级元素,使用margin:auto; 使文章内容中的视频和图片居中对齐(同div居中方法)。 网页中视频、图片居中实例: HTML代码: <!doctype html> <html&gt…

    2018年3月18日
    14.5K0
  • 综合实训-制作动态JSP企业网站

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

    2019年11月16日 未分类
    7.6K0
  • 18个优秀的CSS前端效果代码-网页设计师收藏

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

    2018年2月20日
    5.4K0
  • DIV+CSS自适应布局:三列布局

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

    2018年2月20日
    8.6K0
  • CSS3 制作精美圆角立体button

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

    2018年2月3日
    4.4K0

发表回复

登录后才能评论