内联元素inline-block空隙问题
1.产生的原因
- 元素节点 Node.ELEMENT_NODE(1)
- 属性节点 Node.ATTRIBUTE_NODE(2)
- 文本节点 Node.TEXT_NODE(3)
2.解决办法
第一种,不换行
第二种,改变字体大小(推荐)
设置其父容器的font-size为0,再设置内联元素的字体大小。
第三种 添加注释
<div>
<span>内联元素</span><!--
--><span>内联元素</span>
</div>
第四种 设置“margin-right”
缺点:元素之间间距的大小与上下文字体大小相关;并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的,因此这个方法不通用。
注意:当marigin-right使用相对单位em来表示时,Chrome下可以正常去除间距,而Firefox下元素之间有重叠。
其中IE6/7下始终存在1px的空隙,需要使用word-spacing减少单词间的空白(即字间隔) word-spacing:-1px;
第五种 设置字间距或者字符间距
第六种 使用浮点形式(推荐)
第七种 使用display:table和word-spacing
.box{
display:table; /* 调教webkit*/
word-spacing:-1em;/*其他浏览器*/
}
内联元素inline-block空隙问题的更多相关文章
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- 块元素block,内联元素inline; inline-block;
block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...
- css 内联元素inline 行框全解
首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...
- 如何处理html中的内联元素之间水平空隙
写HTML时把需要紧挨着的内联元素写在一行,设置其父容器的font-size为0,再设置内联元素的字体大小,例如: <!DOCTYPE html> <html lang=" ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- Css中的两个重要概念:块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
- css块级元素,内联元素,内联块状元素
块元素 什么是块级元素?在html中<div><p><h1><form><ul>之类的就是块级元素.设置display:block是就将元素 ...
- 块级元素和内联元素的区别(HTML)
请把下面二行代码放进body标签里: <div style=”border: 1px solid red;”>div1</div> <div style= ...
随机推荐
- MapReduce:实现文档倒序排序,且字符串拼接+年+月+日
写出MapReduce程序完成以下功能. input1: -- a -- b -- c -- d -- a -- b -- c -- c input2: -- b -- a -- b -- d -- ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
- Oracle递归查询与常用分析函数
最近学习oracle的一些知识,发现自己sql还是很薄弱,需要继续学习,现在总结一下哈. (1)oracle递归查询 start with ... connect by prior ,至于是否向上查 ...
- Java中遍历map的四种方法 - 转载
在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...
- javascript日期格式处理
一. 服务端返回的日期和时间之间有T Asp.net MVC中 action返回前台的日期类型数据 是带有 T的,如: 2015-07-07T10:15:01. 这样的数据在Chrome浏览器,会自动 ...
- web前端调优
web前端性能调优(二) http://www.cnblogs.com/liaoweipeng/p/6306606.html
- Spring -- spring整合struts2
1. 概述 spring和struts整合: 1.创建web程序 2.引入struts2类库. 3.创建HelloWorldAction package cn.itcast.struts2.actio ...
- IOS-内存分析
一.内存分析 1.静态分析(Analyze) 不运行程序, 直接检测代码中是否有潜在的内存问题(不一定百分百准确, 仅仅是提供建议) 结合实际情况来分析, 是否真的有内存问题 2.动态分析(Profi ...
- python 2 3 读写中文文件 使用codecs最方便
codecs进行文件的读取 python给我们提供了一个包codecs进行文件的读取,这个包中的open()函数可以指定编码的类型: import codecs f = codecs.open('te ...
- 打造万能的Python开发环境
一.下载与安装 python的版本众多,主流的分2和3,还有各种小版本. django等也有众多版本. 在我们开发过程中,为使用不同的版本测试,在一台电脑上进行只能进行替换. 为了简化.我们使用con ...