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

简单代码如下：

<!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. 【sqli-labs】 less19 POST - Header Injection - Referer field - Error based (基于头部的Referer POST报错注入)

    这个和less18一样,都是基于header的注入 这次的字段是referer Referer: ' AND UpdateXml(1,concat(0x7e,database(),0x7e),1),1 ...

  2. Swift Pointer 使用指南

    Overview C Syntax Swift Syntax Note const Type * UnsafePointer<Type> 指针可变,指针指向的内存值不可变. Type * ...

  3. js-undefinde的一点延伸

    前面写过一篇js中变量定义的问题:Js中判断变量存不存在的问题 本文再补充下,变量声明未初始化的情况,代码: <script> var a; alert(a==undefined)//tr ...

  4. BZOJ 1738: [Usaco2005 mar]Ombrophobic Bovines 发抖的牛 网络流 + 二分 + Floyd

    Description FJ's cows really hate getting wet so much that the mere thought of getting caught in the ...

  5. py西游公关之模块

    Py西游攻关之模块   模块&包(* * * * *) 模块(modue)的概念: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可 ...

  6. centos6.5 安装redis自动启动

    1.安装需要的支持环境 在安装Redis之前首要先做的是安装Unix的 Tcl工具 ,如果不安装的话后期将无法对Redis进行测试.在后期执行make test的时候返回如下错误信息: You nee ...

  7. 【剑指Offer】56、删除链表中重复的结点

      题目描述:   在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4-> ...

  8. 回文词（Palindromes, UVa401）

    输入一个字符串,判断它是否为回文串以及镜像串.输入字符串保证不含数字0. 所谓 回文串,就是反转以后和原串相同,如abba和madam. 所谓镜像串,就是左右镜像之后和原串相同,如2S和3AIAE. ...

  9. 0918如何利用jmeter为数据库插入测试数据

    第一 制定测试计划,关于JMETER会通过驱动取操作数据库,因而请在底部路径填写正确. 下载该资源http://download.csdn.net/download/fnngj/3451945 第二步 ...

  10. php抓取网页

    用php抓取页面的内容在实际的开发其中是很实用的,如作一个简单的内容採集器,提取网页中的部分内容等等.抓取到的内容在通过正則表達式做一下过滤就得到了你想要的内容.下面就是几种经常使用的用php抓取网页 ...