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

简单代码如下：

<!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. 11.02 跳过表中n行

    select x.enamefrom (select a.ename,(select count(*)from emp bwhere b.ename <=a.ename) as rnfrom e ...

  2. c# cookie帮助类

    using System; using System.Collections.Generic; using System.Text; using System.Web; namespace Matic ...

  3. [NOI2015]软件包管理器 树链剖分_线段树

    没有太大难度,刷水有益健康 Code: // luogu-judger-enable-o2 #include <bits/stdc++.h> #define setIO(s) freope ...

  4. Html 页面刷新后出现闪动

    Html 页面刷新后,或跳转后,出现闪动,抖动问题 1.查看有没有用到新字体,新字体链接位置是否存在 如: @font-face { font-family: "AvantGarde-Dem ...

  5. PAT_A1146#Topological Order

    Source: PAT A1146 Topological Order (25 分) Description: This is a problem given in the Graduate Entr ...

  6. 【maven】成功生成jar包，提示找不到主类？

    问题描述:   使用maven构建zookeeper项目,完成一个简单的创建组的实例,代码调试完成,使用mvn clean install成功打包得到了jar包,但是在执行时发现使用java -cp ...

  7. 利用perf排查sys高的问题

    思路 perf top perf record -C 44,48,60,63 -g -o a.data perf report -i a.data --call-graph 查看调用链,可以确定,基本 ...

  8. #MySQL数据库无法远程访问的问题

    在 Ubuntu上装了mysql,因为项目的数据库是mysql,将项目放在tomcat里面webapp下面,一直启动不成功.本来一直以为是jdbc驱动问题,后来发现不是. 感谢!!http://blo ...

  9. poj 1523 求割点把一个图分成几个联通部分

    #include<stdio.h> #include<string.h> #define N 1100 struct node { int u,v,next; }bian[N* ...

  10. 一文快速上手Logstash

    原文地址:https://cloud.tencent.com/developer/article/1353068 Elasticsearch是当前主流的分布式大数据存储和搜索引擎,可以为用户提供强大的 ...