当块级标签（如div）内包含了行内标签（如img），则外层元素与内层元素底部会出现3px的间隔；

代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box{

            background: red;

        }

    </style>

</head>

<body>

    <div id='box'>

        <img src="test.png">

    </div>

</body>

</html>

显示效果如下：

解决办法有三种：

　　1.设置div{ font-size: 0}；将外层块级标签的font-size设置为0；

　　2.设置img{ display: block};将内层行内标签的display设置为block，将其变为块级标签；

　　3.设置img{ vertical-align:top;}；将内层行内标签的vertical-align设置为top；

块级标签包含行内标签底部出现3px间隔的解决办法的更多相关文章

  1. html标签的显示模式（块级标签，行内标签，行内块标签）（转）

    html标签的显示模式(块级标签,行内标签,行内块标签)   今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...

  2. HTML开发之（块级标签，行内标签，行内块标签）

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  3. HTML基础知识（块级标签，行内标签，行内块标签）

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

  4. 基础复习之HTML （meta标签、块级元素与行内元素）

    一.meta标签 SEO 如何在不使用JS的情况下刷新页面(http-equiv="refresh" , content="time") 设置页面缓存 移动端设 ...

  5. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  6. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  7. CSS中的块级元素，行内元素，行内块元素

    博客转载于:https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素,该元素呈现块状,所以他有自己的宽度和高度,也就是 ...

  8. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  9. 【CSS3】块级元素与行内元素的区别

    一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...

随机推荐

  1. 简单Linux命令学习笔记

    1.查看进程 ps -ef | grep 关键字       /*关键字为服务名*/ netstat -unltp | grep 关键字        /*关键字为服务名或者是端口均可*/ 2.杀死进 ...

  2. Xamarin.Android广播接收器与绑定服务

    一.前言 学习了前面的活动与服务后,你会发现服务对于活动而言似乎就是透明的,相反活动对于服务也是透明的,所以我们还需要一中机制能够将服务和活动之间架起一座桥梁,通过本节的学习,你将会学到广播与绑定服务 ...

  3. AngularJS 第四天----控制器

    控制器的作用 今天和大家学习AngularJS中控制器方面的知识,本文会给出一些例子来说明如何使用AngularJS的控制器.在开始我们的例子之前,首先说说AngularJS控制器的作用.简单的来说A ...

  4. .NET基础拾遗（4）委托、事件、反射与特性

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...

  5. Fedora 22中的用户和用户组管理

    The control of users and groups is a core element of Fedora system administration. This chapter expl ...

  6. 【Java并发编程实战】----- AQS(二)：获取锁、释放锁

    上篇博客稍微介绍了一下AQS,下面我们来关注下AQS的所获取和锁释放. AQS锁获取 AQS包含如下几个方法: acquire(int arg):以独占模式获取对象,忽略中断. acquireInte ...

  7. SQL Server-聚焦过滤索引提高查询性能（十）

    前言 这一节我们还是继续讲讲索引知识,前面我们讲了聚集索引.非聚集索引以及覆盖索引等,在这其中还有一个过滤索引,通过索引过滤我们也能提高查询性能,简短的内容,深入的理解,Always to revie ...

  8. discuz接入七牛sdk

    自己摸索了几天,找群里面的人各种问,都没有一个人回答我,哎,国内的开源精神呢...... 需要修改有以下几个: 1.替换 /source/class/class_core.php 文件   解释:就 ...

  9. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  10. 【NLP】基于机器学习角度谈谈CRF（三）

    基于机器学习角度谈谈CRF 作者:白宁超 2016年8月3日08:39:14 [摘要]:条件随机场用于序列标注,数据分割等自然语言处理中,表现出很好的效果.在中文分词.中文人名识别和歧义消解等任务中都 ...