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

简单代码如下：

<!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. button提交表单 a标签提交表单

    <form name="searchForm" id="searchForm" method="get" action="/ ...

  2. 利用node、express初始化项目

    前端做整站是开发,例如:前端是用了vue创建初始化项目,后端我们不会php.java等,我们只能用node去创建去做后端代码,本文就给大家讲解最基础的从零开始创建一个项目的后端环境. 一般来说前后端代 ...

  3. 三种“BIOS设置光驱第一启动的图解”

    除特殊机器类型一般都是“开机按DEL进入BIOS界面,当然还有AMD主板有按F2的进入” 第一种.AWARD BIOS设置光驱启动方法: 进入Bios界面,选第二项——>回车 选中此项,按PAG ...

  4. C#第十节课

    类 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Thr ...

  5. swift-导航栏添加自定义返回按钮

    //1.添加返回按钮 func addBackBtn(){ let leftBtn:UIBarButtonItem=UIBarButtonItem(title: "返回", sty ...

  6. 【Zoj 4061】Magic Multiplication

    [链接] 我是链接,点我呀:) [题意] [题解] /* for a[1] from 1~9 1*1=1 2*1=2 3*1=3 1*2=2 2*2=4 3*2=6 1*3=3 2*3=6 3*3=9 ...

  7. 【codeforces 798B】Mike and strings

    [题目链接]:http://codeforces.com/contest/798/problem/B [题意] 给你n个字符串; 每次操作,你可以把字符串的每个元素整体左移(最左边那个字符跑到最后面去 ...

  8. javascript Prototype constructor的理解(转)

    讲JS的构造的,这个比较清晰,但并不表示一定正确. 这几天一直在思考这个东东,感觉比以前理解更深入了. http://blog.csdn.net/chunqiuwei/article/details/ ...

  9. POJ 2030

    简单DP题. 可以用运算符重载来写,简单一些. #include <iostream> #include <cstdio> #include <cstring> # ...

  10. RubyMine中自动完成只输入部分字母

    RubyMine中自动完成只输入部分字母 1,有下划线情况(其实看第二点跟下划线就关系不大了) 对于attr_reader之类的输入,输入attr之后,下划线可以不输入,然后输入r或者e都可以出来, ...