img标签默认有外边距吗_解决img标签自带外边距问题
三种方法去除img标签自带外边距。
#img img{
height: 100px;
}
#bottom{
width: 100px;
height: 100px;
background-color: red;
}
页面效果：
图1-img的高度是100px
图2-父容器div的高度却是104px
第一个div中包裹img标签，img标签的高度设置为100px，但是第一个div的高度却是104px。上面图1中可以看到两个div之间出现了一条“白边”，这个边距并不是我们设置的，而不同浏览器解析出来的这条“白边”的距离可能是不相同的，这就非常地影响我们布局。在实际布局中经常会遇到这个问题，该如何解决呢？这里给出三种方法来去除img标签自带的这条“白边”。
方法一：给img标签加“display: block”
只需要给img标签加上“display: block”即可，代码和页面效果如下：
#img img{
height: 100px;
display: block;
}
#bottom{
width: 100px;
height: 100px;
background-color: red;
}
页面效果：
图3-两个div之间的“白边”不见了
可以看到，两个div之间的“白边”不见了。
方法二：给img标签的父容器指定高度
手动给img标签的父容器指定高度，这里将其高度设置为100px，和img标签相同，同样可以去除两个div之间的“白边”。
#img{
height: 100px;
}
#img img{
height: 100px;
}
#bottom{
width: 100px;
height: 100px;
background-color: red;
}
页面效果如上面图3。
方法三：将img标签父容器的font-size设置为0，其他子元素的字号另外设置
将img标签父容器的font-size属性设置为0，如果父容器内有其他子元素需要设置字号可以另外设置，这样同样可以去除div父容器内img标签底部的那条“白边”。
这一方法也可以解决两个inline-block元素之间出现空白间距的问题。
#img{
font-size: 0;
}
#img img{
height: 100px;
}
#bottom{
width: 100px;
height: 100px;
background-color: red;
}
页面效果如上面图3。
写在最后
以上为全部内容，感谢阅读。
本博文仅为学习记录和分享交流，如有错漏，还请帮忙指出，也欢迎更多补充，不胜感激。
img标签默认有外边距吗_解决img标签自带外边距问题相关推荐
- img 居中_解决img标签下方出现的小空隙
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图 代码: <!DOCTYPE html> <html><h ...
- python多标签分类_解决多标签分类问题(包括案例研究)
由于某些原因,回归和分类问题总会引起机器学习领域的大部分关注.多标签分类在数据科学中是一个比较令人头疼的问题.在这篇文章中,我将给你一个直观的解释,说明什么是多标签分类,以及如何解决这个问题. 1.多 ...
- 苹果手机自带表格软件_解决手机系统自带软件无法卸载问题
大家新买的安卓手机会发现有不少自带的软件,无法删除,既占用手机空间,又会自动联网,耗费流量,今天给大家介绍下如何卸载这些预装软件: 虽然现在也有一些比较注重用户体验的手机厂商,没有把预装软件植入手机底 ...
- android 获取sd卡目录失败_解决Android手机自带内部存储路径存在但是却获取不到内容的问题...
我有一台中兴的Android手机,型号是 ZTE U930HD,手机没有插入外置SD卡(也就是Micro SD Card,原名Trans-flash Card(TF卡),2004年正式更名为Micro ...
- html password 默认值,html slelect 标签默认值
全部 ${list.channelName} {label: '银行通道名称', name:'channelCode', index:'channelCode', width:120, formatt ...
- html标签默认值,HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
- html p标签文字加粗_文字HTML标签
html p标签文字加粗 p标签 (The p tag) This tag defines a paragraph of text. 该标签定义了一段文本. <p>Some text< ...
- R语言可视化面积图（area chart）移除轴标签与实际图形之间的空白区域实战：默认的面积图、移除轴标签与实际图形之间的空白区域
R语言可视化面积图(area chart)移除轴标签与实际图形之间的空白区域实战:默认的面积图.移除轴标签与实际图形之间的空白区域 目录
- 手把手教你用Keras进行多标签分类（附代码）_数据派THU-CSDN博客 (翻译：程思衍校对：付宇帅)
手把手教你用Keras进行多标签分类(附代码)_数据派THU-CSDN博客 手把手教你用Keras进行多标签分类(附代码)_数据派THU-CSDN博客
最新文章
- Android获取和判断当前手机状态和信息
- 4.2 路由算法与路由协议概述
- linux部署jar项目报错_如何在Linux服务器上部署jar包
- qt5.10 for android 使用webview时qml 与html 中js的相互访问
- CCIE-LAB-第三篇-VRRP+SLA
- java todo error_java.sql.SQLException: sql injection violation, syntax error: TODO UNIQUE unique
- 【推荐】十位笔耕不辍的产品大拿
- 洛谷P3613 睡觉困难综合征
- uniapp路由传多个参数_2020年家用路由器购买推荐（20200921更新）
- 如何拉起被一键清除的安卓进程
- 23. stdin, stdout, stderr
- android 存储盘 dcim,Android上的DCIM目录路径 – 返回值
- TB6612与电机编码器
- 项目经理必备的基本职责
- 最强AngularJS资源合集
- 微信小程序跳小程序short-link（#小程序://）
- 拒绝被淘汰，如何打造自己的金饭碗？
- 利用github和godaddy搭建使用二级域名的个人主页
- [每日100问][2011-10-11]iphone开发笔记，今天你肿了么
- 极客时间es学习笔记