直接在div里面添加img标签有一个坑，img的高度会莫名添加几个像素的高度，查询之后才知道原来css2出现的问题。

引起这个问题原来是img标签默认基线引起的，vertical-align:baseline

解决办法

1、调整基线：vertical-align:middle

2、直接把img变成块状元素：display:block;

解决div里面img标签后面跟着空白符的更多相关文章

  1. 解决 div或者a标签的高度比里面的img高度多的 问题

    今天做练习遇到一个问题,分享一下解决办法: 在编写html中的一个放置图片时,代码如下: <div class="nrtp"> <div class=" ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 解决div里面img的缝隙问题~

    解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...

  4. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  5. div放在li标签中，无法撑开li标签的问题

    作为一个前端菜鸟,我又碰到问题了,今天把div放到li标签中,发现div并没有把li标签撑开,而是在li标签边界之外,具体情况如下图所示: 那么,怎样才能达到预期的效果(每个li中放置一个div标签, ...

  6. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

  7. "无意义"的div和span标签

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...

  8. 解决div里插入img下边缝隙问题

    <html>   <head>   <title> new document </title>   <meta name="author ...

  9. 监听某个div或其它标签的大小改变来执行相应的处理

    jquery 默认的resize只能监听到浏览器窗口大小的改变,但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize就无能为力了.怎么办呢, ...

随机推荐

  1. Windows环境下多线程编程原理与应用读书笔记（8）————信号量及其应用

    <一>线程间同步原因 线程间竞争共享资源: 线程间为完成某个任务而协作: 通过互斥量可以实现线程间由于竞争所需要的同步,通过事件可以实现线程间由于协作所需要的同步. 信号量很好地将互斥量和 ...

  2. Android 开发笔记___Application操作全局变量

    只要app在运行中,他就是一个application.因此可以用它来保存一些全局变量 package com.example.alimjan.hello_world; import android.a ...

  3. C# group 子句

    group 子句返回一个 IGrouping<TKey,TElement> 对象序列,这些对象包含零个或更多与该组的键值匹配的项. 例如,可以按照每个字符串中的第一个字母对字符串序列进行分 ...

  4. js中的路由匹配

    routie插件:http://projects.jga.me/routie/ /** * 路由 * @example * routie( * { * '/':function(){ }, * '/m ...

  5. sublime text全程指南【转载】

    前言(Prologue) Sublime Text是一款跨平台代码编辑器(Code Editor),从最初的Sublime Text 1.0,到现在的Sublime Text 3.0,Sublime ...

  6. WebP 的前世今生

    除了视频,图片占据了 PC 和 App 的大部分流量,为运营方带来高额的成本支出,同时过多的图片加载会影响到网站与 App 的加载速度.因此在保证图片质量的前提下缩小图片的体积就成了迫在眉睫的事情. ...

  7. (转)微信开发连接SAE数据库

    原文地址:http://blog.csdn.net/tterminator/article/details/51067130 在读写云数据库MySQL之前,需要说明的是,在新浪云平台上使用数据库时,该 ...

  8. 一起写框架-控制反转（Ioc）概述（二）

    控制反转概述 控制反转(Inversion of Control,英文缩写为IoC),就是将代码的调用的控制权,由调用方转移给被调用方. 如图:修改代码A类的代码,才能将B类的对象换成C类.代码的控制 ...

  9. postgis几何操作函数集

    管理操作函数 AddGeometryColumn - Adds a geometry column to an existing table of attributes. By default use ...

  10. MongoDB安装(windows 10环境)

    1. 下载 https://www.mongdb.com/ 选择版本:ws 2008 R2 64bit 2. 安装运行下载完成的MSI文件 安装时候选择自定义配置,选择安装路径,安装到E盘 等待2分钟 ...