本文转载自：http://www.javaxxz.com/thread-359306-1-1.html
问题：自适应高度的块级元素内添加图片后，其高度会比图片高度多出一块
简单代码如下：
<!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聚美优品常见问题源代码”中，我们可以深入学习如何利用HTML来解决在开发聚美优品这种电商网站时可能遇到的问题。 聚美优品是一家知名的在线购物平台，其网站的设计和功能都需要通过HTML与其他Web技术...
以下是一些关于Struts框架中常见的问题及其解决方案： 1. **ActionServlet配置问题**：如果在web.xml文件中没有正确配置ActionServlet，可能会导致应用无法启动。确保 `<servlet>` 和 `<servlet-mapping>` 配置正确...
HTML常见问题涉及语法、浏览器兼容性、样式控制、动态交互等多个方面。本篇将深入探讨这些关键知识点。 一、HTML基本语法 HTML由一系列元素组成，每个元素由标签定义。例如，`<html>`是根元素，`<head>`包含元数据...
### Java Web开发中常见的中文乱码问题解析 在Java Web开发过程中，中文乱码问题是开发者经常遇到的一个挑战。这些问题主要源于Java默认的Unicode编码与HTML页面及表单默认的Latin-1编码之间的不兼容，以及在不同的...
vb的常见问题，HTML 帮助文件格式
以上只是前端开发中部分常见问题的概述，实际开发过程中可能还会遇到更多复杂情况。持续学习、实践和经验积累是解决这些问题的关键。通过阅读博客、参与社区讨论，以及不断尝试和反思，开发者能够不断提升自己的技能...
【Java学习笔记】JavaWeb开发中常见问题总结 在JavaWeb开发中，开发者经常会遇到各种问题，这些问题涵盖从基础语法到高级设计模式的各个方面。以下是一些关键知识点的概述： 1. **Java基础知识**： - **Classpath...
### 常见软件开发平台搭建实验中的问题及解决方法 #### 一、Tomcat运行时的常见问题及其解决策略 在进行软件开发时，Tomcat作为常用的Java Web服务器之一，其正常运行对于项目的顺利推进至关重要。但在实际操作中...
LR常见问题整理汇总 LoadRunner 是一个功能强大且灵活的性能测试工具，它可以模拟大量用户并发访问应用程序，以评估应用程序的性能和可扩展性。在使用 LoadRunner 进行性能测试时，经常会遇到一些常见的问题，本文...
本文将从给定的文件中生成相关的知识点，涵盖了软件工程答辩中的常见问题，包括 Java 编程、Tomcat 服务器、SQL Server 数据库、JSP 文件处理、Servlet 编程、过滤器应用等方面。 一、Java 编程 * Java 文件需要...
在实践中，经常会遇到各种问题，这里我们将探讨一些常见的网页制作问题及其解决方案。 1. **在Dreamweaver中输入空格**： - Dreamweaver允许用户通过Shift+Ctrl+空格组合键输入连续空格。 - 使用智能ABC输入法时...
"web常见问题汇总"这个主题涵盖了从服务器端编程到前端设计的多个方面。以下是根据提供的压缩包文件名所涉及到的知识点的详细解析： 1. **PHP函数**（常用的PHP函数.txt）： PHP是一种广泛使用的服务器端脚本语言...
在网页制作领域，Web标准是指导开发者创建高质量、可访问且跨浏览器兼容的网页的关键准则。...通过深入研究“web标准常见问题集合(CSS)”这个资源，开发者可以解决实践中遇到的诸多难题，进一步提升自己的技能。
它不仅解决了移动设备资源有限的问题，还促进了无线网络上的信息交流和内容分发。尽管随着技术的进步，诸如HTML5等现代Web标准在移动设备上的支持变得更为广泛，WML的历史地位和对早期移动互联网的影响不可忽视。
本篇文章将深入探讨HTML网页设计的技巧以及在网页制作过程中可能遇到的常见问题，帮助你提升网页设计的专业水平。 首先，理解HTML基本元素至关重要。HTML由一系列标签组成，如`<html>`、`<head>`、`<body>`、`...
本资源“PB常见问题集”是一个HTML格式的文档，集合了作者在学习和应用PB过程中积累的问题解答，对初学者和中级用户来说极具价值。 在学习PB的过程中，开发者经常会遇到各种问题，如语法错误、控件操作、数据窗口...
这份文档包含了多种常见的编程问题，旨在帮助用户解决在C语言开发过程中遇到的实际问题，提升编程技能和效率。 文档提供了两个版本：Html和Pdf，满足不同用户的需求。Html版本方便在线浏览，支持直接跳转和搜索，而...
这份"C语言常见问题集(html)"很可能是对C语言学习过程中遇到的各种难题和常见疑问的集合，以HTML格式呈现，方便读者查阅和理解。 在C语言的学习中，以下是一些常见的知识点： 1. **基本语法**：C语言的基础包括...
在网页设计中，`div+css`是一种常见的布局方式，但它也伴随着一系列的浏览器兼容性问题。这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异，尤其是老版本的Internet Explorer（如IE6和IE7）与其他...
这份"**c常见问题集**"正是为了解答这些疑惑而整理的资源集合，它以HTML格式呈现，方便读者查阅和理解。 首先，C语言的基础部分是学习的重点。包括变量声明、数据类型、运算符和表达式等，初学者往往会在类型匹配、...