img底部空白以及多余的空白文本节点解决方案
1:img底部有空白的问题
img的css属性display的默认值是inline,这样会导致img的vertical-align的默认值是 baseline;
baseline又不是bottom,只是向四线三格中的第三条线对齐,不是向第四条线对齐;所以出现底部出现空白的地方说到底是第三条线到第四条线的距离;
要想去掉这段距离,只能从vertical-align下手:
1: 设置vertical-align:top/bottom/middle;
2: 设置line-height:0px 或 font-size:0px 间接影响vertical-align的值;
3: 设置img标签为display:block 或 float:left,这样就会影响到img的display默认值;
2:img渲染的时候会在后面多出现空白文本节点的问题
先看第一种写法:
<div style="font-size: 12px;">
<img src="../img/img.jpg" alt="hh" style="width: 12px;height: 12px;" />
我是欧健锋
</div>
图片和文字间还是有一点距离的;
第二种写法:
<div style="font-size: 12px;">
<img src="../img/img.jpg" alt="hh" style="width: 12px;height: 12px;" />我是欧健锋
</div>
图片和文字间距离基本为0;
总结:出现上述的问题主要看img的末尾有没有html标签,如果没有的话浏览器会自动渲染一个空白文本节点在img的后面;
解决方法:
1:像楼主这样把后面的节点挨着img标签
2:设置img标签为浮动元素,float:left;
3:设置img的父元素的font-size:0px;
img底部空白以及多余的空白文本节点解决方案的更多相关文章
- chrome://inspect调试html页面空白,DOM无法加载的解决方案
chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...
- 深入理解DOM节点类型第二篇——文本节点Text
× 目录 [1]特征 [2]空白 [3]属性[4]方法[5]性能 前面的话 文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点.该节点简单直观,本文将详细介绍该部分内容 特征 文本节点 ...
- jacascript DOM节点——元素节点、属性节点、文本节点
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...
- html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- DOM中文本节点索引方法
问题 对于 jquery 接口text()只能取到有标签的 dom对象中 文本内容. 如果索引对象本身就是文本节点,则不好索引到, 没有相关的索引选择器. 例如: 对于<input>aaa ...
- 【实践】js 如何实现动态添加文本节点
对于我这个js 小白来说 今天鼓起勇气做起了邮箱认证这个特效 但是这次不是想说如何实现这这个特效而是想记录一下特效当中的某个部分 那就是向元素节点动态添加文本节点 百度了一下动态添加文本节点的方式 是 ...
- 初探JavaScript(一)——也谈元素节点、属性节点、文本节点
Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...
- HTMLDOM中三种元素节点、属性节点、文本节点的测试案例
HTML dom中常用的三种节点分别是元素节点.属性节点.文本节点. 具体指的内容可参考下图: 以下为测试用例: <!DOCTYPE html> <html> <head ...
- DOM中元素节点、属性节点、文本节点
DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...
随机推荐
- Android 4.2真坑爹
艹~~~,Android4.2真坑爹,4.1以前的方法都不能使用了. 操蛋呢...
- HTML5 简单Demo1
----------------------------页面效果图------------------------------ 截图1: 截图2: -------------------------- ...
- svn命令行的使用
只是说一下,svn平时工作时常用的命令 1.svn delete 目录 删除svn版本里的相关目录 2.svn add 目录 将本地的目录添加到svn版本信息里 3.svn commit 目录 提交s ...
- 查看已安装tensorflow版本以及安装路径
查看版本: import tensorflow as tf tf.__version__ 查看安装路径: tf.__path__
- JAVA数据结构--AVL树的实现
AVL树的定义 在计算机科学中,AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为1,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下的时间复杂度都是.增 ...
- 初学 spring
1.spring 开发环境,包含eclipse https://spring.io/tools3/sts/all/
- RabbitMQ---初识
1.概述 1.1 RabbitMQ 是 实现了 高级消息队列协议(AMQP) 的开源 消息代理软件,也称为 面向消息的中间件: AMQP:Advanced Message Queuin ...
- JAVA学习4:用Maven创建Struts2项目
采用struts版本:struts-2.3.8 一.创建一个web项目 参考前面文章,项目名:maven-struts-demo. 二.配置pom.xml文件添加struts2依赖 <pro ...
- Clojure编写一个阶乘程序 使用递归
这是递归 (def f (fn fb [x] (if (< x 2) 1 (* x (fb (- x 1)) ) ) ) ) ( ...
- 如何优雅的封装一个DOM事件库
1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级 ...