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

简单代码如下：

<!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%3D300/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. python开发中常见的小坑

    (1)可变参数类型作为函数参数默认值,函数参数默认值的设置在Python中只会被执行一次,也就是定义该函数的时候. 解决办法,设置为None,然后判断 (2)Python中的变量名解析遵循所谓的LEG ...

  2. H5 开发中常见的小问题

    1.解决 浏览器 返回按钮不刷新的问题 window.onpageshow = function(event) { if (event.persisted) { window.location.rel ...

  3. css3制作网页中常见的小箭头

    /* css3三角形(向上 ▲) */ div.arrow-up { width:0px; height:0px; border-left:5px solid transparent;  /* 右透明 ...

  4. asp.net开发中常见公共捕获异常方式总结(附源码)

    本文实例总结了asp.net开发中常见公共捕获异常方式.分享给大家供大家参考,具体如下: 前言:在实际开发过程中,对于一个应用系统来说,应该有自己的一套成熟的异常处理框架,这样当异常发生时,也能得到统 ...

  5. 【转】《深入理解计算机系统》C程序中常见的内存操作有关的典型编程错误

    原文地址:http://blog.csdn.net/slvher/article/details/9150597 对C/C++程序员来说,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构 ...

  6. Oracle中常见的33个等待事件小结

    在Oracle 10g中的等待事件有872个,11g中等待事件1116个. 我们可以通过v$event_name 视图来查看等待事件的相关信息     一． 等待事件的相关知识 1.1 等待事件主要可 ...

  7. 错误内存【读书笔记】C程序中常见的内存操作有关的典型编程错误

    题记:写这篇博客要主是加深自己对错误内存的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. 对C/C++程序员来讲,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构成的 ...

  8. 《深入理解计算机系统》C程序中常见的内存操作有关的典型编程错误

    对C/C++程序员来说,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构成的模块跑起来后才出现内存崩溃,是很让人痛苦的.因为崩溃的位置在时间和空间上,通常是在距真正的错误源一段距离之后才 ...

  9. OpenStack安装部署管理中常见问题解决方法

    一.网络问题-network 更多网络原理机制可以参考<OpenStack云平台的网络模式及其工作机制>. 1.1.控制节点与网络控制器区别 OpenStack平台中有两种类型的物理节点, ...

随机推荐

  1. Bem命名

    BEM思想 1. 什么是BEM: BEM:(Block块,Element元素,Modifier修饰符)一种命名规范, 其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开 ...

  2. Can't find variable: SockJS vue项目

    用的vue-cli(webpack-simple模板),在开发环境运行(npm run dev),一直都没有问题,突然在ios的safari中调试,出现报错:Can't find variable: ...

  3. python tips:dict的key顺序

    python3.6+版本中,dict的键值保持插入有序. t = list(range(10)) b = t[:] d = dict(zip(t, b)) print(list(d.items())) ...

  4. 【airtest, python】报错：requests.exceptions.ConnectionError: ('Connection aborted.', ConnectionResetError(54, 'Connection reset by peer'))，解决方法如下

    环境及设备 mac, xcode , iphonex 问题 最近出现一个让人费解的问题,airtest 没跑多长时间,服务就断掉,而且总是报“requests.exceptions.Connectio ...

  5. PAT_A1148#Werewolf - Simple Version

    Source: PAT 1148 Werewolf - Simple Version (20 分) Description: Werewolf(狼人杀) is a game in which the ...

  6. 操作符重载、继承（day08）

    二十 操作符重载 函数操作符"()" 功能:让对象当做函数来使用 注:对参数的个数.返回类型没有限制 eg: class A{...}; A a; //a.operator()(1 ...

  7. 单行函数、表连接(day02)

    回顾: 1.数据库介绍 sql: dql: select dml: insert delete update ddl: create drop alter tcl: commit rollback s ...

  8. 07.网络编程-4.HTTP

    HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器 ...

  9. 【1】Django概述

    道生一,一生二,二生三,三生万物 无名天地之始,有名万物之母 ——老子 python程序web项目开发,是非常重要的一部分,Python为基础的web项目开发的框架有很多,django无疑是最强大we ...

  10. 1、springboot+mybatis+zookeeper+dubbox+maven+pagehelper

    一.创建普通的maven的web项目 2.配置KD42WF_Part1下的pom.xml <?xml version="1.0" encoding="UTF-8&q ...