【转】行内元素和inline-block产生的水平空隙bug

重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码:

<div class=“”><span class=“bgr”>去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span></div>

然而删除间距后,代码堆成了一片,看得起很不舒服,特别是从重构转给JS同事后,JS同事看完代码后就会提出抱怨,代码太乱,他们更希望看到的是这样的代码:

<div class="">
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
</div>

其实,给JS同事带来的清晰的、方便阅读和修改的代码,也是重构工程师能力的体现。

了解行内元素产生水平间距的原因有助于我们解决这个问题,那么产生这些间距的原因是什么呢?

1.行内元素之间的“换行符”产生间距

<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

2.行内元素之间使用“tab(制表符)”产生间距

<div class="">
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

3.行内元素之间使用“空格”产生间距

<div class=""><span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

上以上3点可以看出,行内元素之间产生的间距,是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字体大小来控制。

那么改变字体的大小可调整行内元素的间距么?

上图把字体从0px~18px~36px的调整,可见行内元素之间的水平间距从无到有,并不断变大,说明行内元素之间产生间距是由换行符、tab(制表符)、空格等字符引起的,那么设置字体大小font-size:0可以是不是可以在所有浏览器中除去这些间距呢?

经过测试后,可发现设置font-size:0并不能使得换行符、tab(制表符)、空格等在所有浏览器中产生的额外间距消失:

1.IE6、7浏览器始终存在的 1px 空隙

2.最新版本的Safari浏览器(5.1.7)不支持定义字体大小为 0 的浏览器

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

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

*word-spacing:-1px;

2.使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px

html{-webkit-text-size-adjust:none;}

问题解决了,代码如下:

结构:
<div class="span-wrap">
    <span>字符产生间距</span>
    <span>字符产生间距</span>
    <span>字符产生间距</span>
    <span>字符产生间距</span>
    <span>字符产生间距</span>
    <span>字符产生间距</span>
</div>

样式:
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 */
 }

有些同学会问为什么要这么复杂,干脆直接使用浮动,简单,也不用写多余的hack,多好。

不可否认,使用浮动技术是比较好的办法,实际工作中我们使用浮动也是比较多,但是也并不是每处地方都要使用浮动,而且使用浮动后还需要清除浮动的操作。

工作中,我们可不断尝试使用”新办法“来解决问题,保持追求”时尚“的精神,不断丰富的知识面。好的代码也方便更好的团队合作,也是体现自己能力的一项指标。

【转】行内元素和inline-block产生的水平空隙bug

时间: 2024-10-10 18:43:04

【转】行内元素和inline-block产生的水平空隙bug的相关文章

块级元素和行内元素的区别 (block vs. inline)

块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了width属性,仍然独占一行. 可以设置margin, padding. 行内元素 (display: inline) HTML元素分为替换元素和非替换元素. 替换元素是指浏览器根据其标签的元素与属性来判断显示具体的内容.例如img,input等. HTML中大多数元素是不可替换元素,他们将内容直接告

css布局中关于 块状元素和行内元素的区分

这两天在准备实习的面试和笔试,准备复习一下这些基础的概念,避免自己处于一种仅脑袋理解嘴巴不能表述出来的状态. 块状元素和行内元素的概念是在css页面布局这个地方出现.主要是将html标签按照一定的特性分成2类:块状元素和行内元素(内联元素). 首先概念上理解一下: 块状元素:   块状元素(Block element),字面理解就是一个方块嘛,它一般是其它元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其它元素同一行的,即相当于两个块状元素写一块是垂直布局的.最常用块状元素是div和p

块级元素与行内元素

标准文档流是指在没有CSS干预时各种元素的排列规则.在这种前提下,HTML文档中的元素可以分为两大类:块级元素和行内元素.1.块级元素(block)独占一行,可以设定元素的宽和高.常见的块级元素有:* html 文档的类型* body 文档的内容* h1-h6 一级标题到六级标题* p 文章段落* ul 无序列表* li 定义列表项目* ol 有序列表* dl 定义列表* dt 定义列表中的项目* dd 定义列表中定义条目* pre 定义预格式文本* blockquote 大段引用* div 划

块级元素和行内元素

块级元素和行内元素的区别 1.块级元素(block element)块级元素会独占一行,默认情况下宽度自动填满其父元素宽度.   行内元素(inline element)行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 2.块级元素是可以设置宽高,而行内元素不可以. 3.块级元素可以设置外边距(margin),内边距(padding).   行内元素水平方向的margin-left; margin-right; padding-left; padding-right;

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在

行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的display属性(行内元素和块级元素) 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 我们最关心的还是display:inl

HTML 行内元素和块级元素的理解及其相互转换

块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格)... 特点:1.块级元素会独占一行,其宽度自动填满其父元素宽度. 2.可以设置width,height属性.(即使设置了宽度,也是独占一行的,除非用float属性等特殊情况) 3.可以设置margin(外边距)和padding(内边距). 行内元素:span, strong, em, br, img,

详解css中的display属性(行内元素和块级元素)

display属性 首先,所有主流浏览器都支持 display 属性.其次,我们都知道display 属性规定元素应该生成的框的类型.默认值:inline 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 那么,display:inline.display:block和display:inline-block有什么区别呢? <s

HTML的display属性将行内元素、块状元素、行内块状元素互相转换以及三者的区别

1.行内元素 (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 <html> <head> <meta charset="utf-8" /> <title>行内元素</title> <style type="text/css"> span { width: 120px; /*设置宽高无效*/ height

HTML行内元素、块级元素、行内块级元素的特点与区别

元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 元素分类方式 HTML 可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者可以通过设置display属性值实现相互转化.实现如下 #转换为行内元素 display:inline; #转换为块状元素 display:block; #转换为行内块状元素 display:inline-block; 元素特点 行内元素 不会自动换行 设置宽高无效 设置margin上下方向无效,左右方向有效