内联元素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= ...
随机推荐
- 大牛是怎么思考设计MySQL优化方案的?
在进行MySQL的优化之前,必须要了解的就是MySQL的查询过程,很多查询优化工作实际上就是遵循一些原则,让MySQL的优化器能够按照预想的合理方式运行而已. 图-MySQL查询过程 一.优化的哲学 ...
- jQuery带缩略图的宽屏焦点图插件
在线演示 本地下载
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- 华为S5700系列交换机AR配置静态IP双链路负载分担
适用于:有多个以太WAN口的机型. 业务需求: 运营商1分配的接口IP为100.100.1.2,子网掩码为255.255.255.252,网关IP为100.100.1.1. 运营商2分配的接口IP为2 ...
- adplayer移植【转】
本文转载自:https://blog.csdn.net/qq361294382/article/details/50525412 这两天做madplayer移植,由于是刚装的ubuntu14.04,所 ...
- COS-7设备管理
操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才能运行. 操作系 ...
- xcode9打包问题
xcode9打包找不到icon http://blog.csdn.net/yohunl/article/details/78065656 换用xcode8打包 https://www.cnblogs. ...
- linux下安装配置apache+nagios
1.安装依赖包 yum install -y gcc glibc glibc-common gd gd-devel xinetd openssl-devel 2.创建nagios用户和用户组 # us ...
- JavaWeb -- Struts2 ResultType细化, 国际化
1. ResultType细化 <result-types> <result-type name="chain" class="com.opensymp ...
- MSSQL复制表操作
1:复制表结构及数据到新表 select * into 目的数据库名.dbo.目的表名 from 原表名 select * into my0735home.dbo.infoMianTest from ...