html中常见的小问题（1）

问题：自适应高度的块级元素内添加图片后，其高度会比图片高度多出一块

简单代码如下：

<!doctype html>
<html><head><style>.box{width:533px;margin:100px auto;border:1px solid red;}</style></head><body><div class="box"><img src="http://f.hiphotos.baidu.com/image/h=300/sign=12e703ffa5ec8a130b1a51e0c7029157/c75c10385343fbf2f7da8133bc7eca8065388f2f.jpg" width="533px" height="300px" alt="美女"/></div></body>
</html>

效果图如下：

1、我们可以发现div的高度比图片的高度多出来了几个像素，这是为什么呢？

　这是因为img标签为行块级标签，它既有块级标签的特性，也有行级标签的特性。这就需要我们理解行级标签中vertical-align属性各个值的含义了，通常它的默认值为baseline(基线)，而baseline和bottom之间是有一定距离的，由于这个距离的存在才造就了这块空白的存在，只要是图片属性是display:inline-block,这块空白就会存在。

2、我们一般怎么解决呢？

（1）给img标签添加display:block属性

（2）给img标签添加vertical-align:top;属性

（3）给div标签添加line-height:0或者font-size:0;属性

（4）给定div标签宽度和高度，然后添加overflow:hidden;属性

（5）给img标签添加float:left属性，通常用于图片和文字的混合排列

总结：行级标签默认是和父级元素的baseline（基线）对齐的，而父级的baseline（基线）和其bottom（底边）之间又是有距离的，所以我们通常给行内标签添加vertical-align:top/align:top/middle/bottom任意一个值就可以解决这个问题;其他解决方案视情况而定；

html中常见的小问题（1）相关推荐

编程中常见的小错误·
1.最低级的错误:单词拼写错误 2.要求源文件名称必须跟类名称一致 3.所有的标点符号必须是英文格式下的 4.成对编程 5注意缩进缩进tab 向前缩进 shift+tab 6.编译: javac H ...
扒一扒我们生活中常见的品牌小程序
大众喜欢的知名品牌,从我们日常吃.穿.住.行等几个层面,每个人心中都有自己信赖和认可的那一款.每到活动大促,恨不得饭都省了,也要挤时间扒一扒自己能买什么.天猫.淘宝.京东等成为了我们常去网购的平台,买 ...
操作系统中进程并发运行的过程_三种电磁流量计运行过程中常见故障解决详情！...
原标题:三种电磁流量计运行过程中常见故障解决详情! 昨天给大家介绍了电磁流量计的一些典型故障,今天我们继续来谈电磁流量计的故障问题!电磁流量计在正常的保养与维护之后,在正常使用的过程中依旧是会因为当时 ...
mysql等待事件类型_Oracle中常见的33个等待事件小结
在Oracle 10g中的等待事件有872个,11g中等待事件1116个. 我们可以通过v$event_name 视图来查看等待事件的相关信息一．等待事件的相关知识 1.1 等待事件主要可以分为两 ...
JavaScript 面试中常见算法问题详解
JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...
项目中常见错误总结一
项目中常见错误总结一以下是在项目开发过程中会遇到的错误总结,会不定期进行更新: 1.json-lib 的maven dependency遇到的问题: 项目中要用到json-lib,mvnreposi ...
学完css3的总结,css3中常见的单位及总结
摘要:css3中常见的单位:1. px:绝对单位,页面按精确像素展示2. em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内 ...
java api集合,javaAPI_集合基础_集合中常见操作示例
集合中常见的操作 1.list集合去重 //使用HashSet去重 public static List removeDuplicate(List list) { HashSet h = new Ha ...
深度学习中常见的损失函数
文章来源于AI的那些事儿,作者黄鸿波 2018年我出版了<TensorFlow进阶指南基础.算法与应用>这本书,今天我把这本书中关于常见的损失函数这一节的内容公开出来,希望能对大家有所帮 ...

html中常见的小问题（1）

html中常见的小问题（1）相关推荐

最新文章

热门文章