行内元素之间产生的间隙

学习总结：

间隙是如何产生的：换行符，tab(制表符)，空格符等造成的

如何去除(方法之一)：用font-size:0px来消除换行符，tab(制表符)，空格符等造成的影响

但要注意:

1.IE6，IE7浏览器当设置font-size：0时，换行符、tab（制表符）、空格始终存在1px的空隙
       2.最新版本的Safari浏览器，Chrome浏览器不支持字体大小为0的浏览器

       通过查找资料后，一种比较正常的解决方法如下：

       1.针对IE6、7浏览器，使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔）
       word-spacing:-1px;

       2.使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px
       html{-webkit-text-size-adjust:none;}

使用方法

HTML

CSS：

html{
           -webkit-text-size-adjust:none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */
       }
.span-wrap {
          font-size:0;/* 所有浏览器 */
       word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */
       }
        .span-wrap span{
       font-size: 12px;
       letter-spacing: normal;/* 设置字母、字间距为0 */
       word-spacing: normal; /* 设置单词、字段间距为0 */
        }

行内元素之间产生的间隙相关推荐

html清除内部所有补白,如何清除行内元素之间的HTML空白
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 前言相信大家应该都遇到过下面这个问题:"HTML源码中行内元素之间的空白显示在了屏幕上".可能大家 ...
CSS清除行内元素之间的HTML空白
至今我还记得年轻是在IE6上开发的那些苦逼日子,特别希望IE浏览器采用 inline-block 的显示方式.行内块(inline-block)是非常有用的,特别是想要不用'block'和'float ...
【原】行内元素产生水平空隙是bug吗
重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码: <div class="">< ...
块元素、行内元素、行内块元素
一.块元素 block element 块元素的特性独霸一行,总是在新行上开始宽度缺省是它父级元素的100%,除非设定一个宽度高度.行高.外边距.内边距都可以设置可以容纳其他内联元素或者其他块 ...
HTML 之块级元素、行内元素和行内块元素之间的嵌套规则
一.简介之前对元素之间的嵌套规则没有进行系统的梳理,一直以为各种元素之间可以随意进行嵌套,但在实际敲代码的过程中发现并不是这样,大部分标签之间是可以随意嵌套的,但也存在一些特殊规则,比如:p标签内不 ...
css:块元素、行内元素、行内块元素以及三种元素之间的转换
一.三种元素的介绍 1.块元素块元素的特点独占一行,也就是会自动换行可以设置高度.宽度.外边距.内边距宽度默认是父元素的宽度常见块元素 <h1></h1>---< ...
行内元素与块级元素之间的区别及转化
注意看红色箭头,共有6个步骤,按顺序操作下去 1.首先,我们先来了解一下什么是行内元素什么是块级元素. 2.我们先讲行内元素.行内元素就是水平方向上一行一行的堆叠起来的.意思就是说他们在同一行不在同 ...
行内元素块级元素之间的嵌套
默认的span标签是一个行内标签,页面构成时,尽量把它作为最后一个标签. 当然不绝对,你可以在内套用同是行内标签的元素:<i>.<span>.<em>...等等等. ...
CSS 块元素,行内元素,行内块元素及元素之间转换
元素的显示模式元素一般分为块级元素和行内元素元素种类排列设置样式默认包含块元素独占一行可以设置宽高容器的100% 可以包含任何标签行内元素一行可以放多个行内样式不可直接设置宽 ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...

行内元素之间产生的间隙

行内元素之间产生的间隙相关推荐

最新文章

热门文章