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

简单代码如下：

<!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. 怎样在PDF文件中查找某个特定的词？

    不得不说中国的修饰词太多了例如:“滚”可以这样说,请你以一种圆润的方式离开:上次小编在路上听到某男子打电话,好像是给女孩子,那口才,是真的牛,夸人不带重复的.要不是我男孩子,我都想以身相许了.人们常常 ...

  2. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

  3. luogu P1714 切蛋糕 单调队列

    单调队列傻题. 考虑以 $i$ 结尾的答案 : $max(sumv_{i}-sumv_{j}),j \in [i-m,i-1]$ ($sumv_{i}$ 为前缀和) 稍微搞一搞,发现 $sumv_{i ...

  4. XX-Net的完整教程

    1.下载谷歌浏览器,安装. 2.百度搜索github,github中搜索XX-Net,下载稳定版 3.解压缩下载的文件夹,运行start.vbs文件.如果弹出管理员请求权限请允许,弹出防火墙警告,请允 ...

  5. 一张图搞懂javascript原型链

    js高级里面原型链对于新手来说并不友好,总的来说就是 任何函数都有自己的原型对象(prototype),任何实例对象都__proto__指向构造函数的原型 先来个最简单的原型三角关系 var fn = ...

  6. Netty学习总结（3）——Netty百万级推送服务

    1. 背景 1.1. 话题来源 最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...

  7. 如何彻底卸载系统自带的IE浏览器

    IE浏览器是windows系统上自带的浏览器,有时我们想要用其他的浏览器,例如chrome,卸载IE浏览器,那么应该如何卸载呢?下面就以win7上的IE9为例,告诉大家如何卸载IE浏览器. 方法/步骤 ...

  8. 洛谷 P2056 BZOJ 2743 [HEOI2012]采花

    //表示真的更喜欢洛谷的题面 题目描述 萧芸斓是 Z国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花.花园足够大,容纳了 n 朵花,花有 c 种颜色(用整数 ...

  9. “System.Runtime.InteropServices.COMException”类型的第一次机会异常在 ESRI.ArcGIS.Version.dll 中发生

    “System.Runtime.InteropServices.COMException”类型的第一次机会异常在 ESRI.ArcGIS.Version.dll 中发生 其他信息: The speci ...

  10. Thread.suspend和println使线程死锁

    Thread.suspend和println使线程死锁 package com.stono.thread2.page39; public class MyThread extends Thread{ ...