如何处理html中内联元素之间水平空隙？

前端工作中，设计代码时，经常会有人手动删除行内元素之间产生的额外空隙，并通过设置margin或padding来获取想要间距吗？如代码：

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

这看起来很不舒服，特别扔给给JS同事后，JS同事看完代码后就会提出抱怨，代码太乱，他们希望的代码是如下：

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

那么有什么好的办法解决的？答案也是有的。

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

换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
</div>

展现效果如下：

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

展现效果如下：

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

<div class="">换行符产生间距 换行符产生间距 换行符产生间距 换行符产生间距
换行符产生间距 换行符产生间距
</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">
字符产生间距
字符产生间距
字符产生间距
字符产生间距
字符产生间距
字符产生间距
</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，多好。的确使用浮动技术是比较好的办法，实际工作中我们使用浮动也是比较多，但是也并不是每处地方都要使用浮动，而且使用浮动后还需要清除浮动的操作。

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

、html概述

1、html标签是用来给文本添加语义的，而不是用来修饰文本的；

2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一样，才不会乱码；

3、<!DOCTYPE html> DTD文档申明告诉浏览器我用的什么协议来写的，不是html标签；

4、webstorm快捷键大全：https://www.cnblogs.com/yeminglong/p/5995421.html

二、基础标签

1、h、p 和 hr 标签

三个标签都是占一行

2、注释：

3、图片：<img src=" ">

不会独占一行；
保证不变形，指定宽或者高即可；
title 和 alt 属性；
src 可以是相对路径（../ 上一级）和绝对路径，路径中尽量不含中文，相对路径不可跨盘符，路径分隔统一写 / ，绝对路径的可移植性不好；

4、换行： 用于内容未完的换行

5、跳转：<a href=" "></a>

支持文字和图片的跳转；
地址必须加 http 或者 https；
href 可以指定本地的地址；
target（_self 和 _blank）属性控制跳转是否打开新的选项卡；
title 提示作用；

6、base 标签：<base target="_self ">

统一指定 a 标签怎么打开，写在 head 中

7、假链接：点击不会跳转

a 标签的 href 属性值为 # 或者 javascript
# 会跳转到页面的顶部，而 js 不会

8、锚点：<a href="#id值"><\a>

可以跳转到页面的指定位置
可以跳转到其他页面的指定位置，只需在 # 前面加上页面的路径即可
跳转无过度动画

三、列表标签

1、无序列表（!）

<ul><li><\li><\ul>；
整体不可分割；
ul 除了 li 不建议再加其他的标签，li 标签中可以放其他标签来丰富内容；
li 中还可嵌套列表；
ws快捷生成 ul>li*3>h2+p；

2、有序列表（*）

<ol><li><\li><\ol>；

3、定义列表

dt 是标题，dd 是具体的描述；
推荐一个 dt 一个 dd ，也可以一个 dt 对多个 dd 或者没有 dd；
dl 中不建议加其他标签，二 dt 和 dd 可以加；
应用：网站尾部，图文混排（仿京东做个网站的尾部）；

四、表格标签

1、格式

表格的边框默认不显示（border）

2、属性

（1）宽高

table 和 td 可用；
默认高宽根据内容调整；
td 设置高宽只会改变当前单元格的状态，而不会改变 table 的高宽；

（2）水平和垂直对齐（align 和 valign）

水平对齐三个都可以用，而垂直对齐针对 tr 和 td；
table 设置 align 控制表格在水平方向的对齐，给 tr 和 td 设置都是控制单元格里的内容的对齐方式，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；
tr 和 td 设置 valign 都是控制单元格内容的垂直方向的对齐，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；

（3）内边距和外边距（cellpadding 和 cellspacing）

两个属性都是 table 的；
外边距是指格子与格子之间的空隙，而内边距是指格子与文字之间的间隙；

（4）细线表格

先给 table 设置 bgcolor；
再给 tr 设置 bgcolor；
最后 table 设置 cellspacing；

3、表格的其他标签

（1）caption：表格的标题标签，必须写在 table 内而且需紧跟 table

（2）th：th 和 td 同级，th 有加粗的效果

4、表格的结构

（1）组成：caption 标题、thead 表头、tbody 主体、tfoot 尾部

（2）说明：

浏览器自动添加 tbody；
table 设置高度后，tfoot 和 thead 的高度是不会变化的；

5、单元格的合并

（1）水平方向：td 属性 colspan = "2"；

（2）垂直方向：td 属性 rowspan = "2"；

五、表单标签

1、格式

2、input 标签

（1）type = text：

（2）password：

（3）radio：互斥要设置 name 相同；默认选中 checked

（4）checkbox：选中 checked

（5）button：

（6）image：

（7）reset：value 修改标题

（8）submit：

form 的 action 确定提交的地址
提交数据加 name 属性

（9）hidden：

-----------------------------------------------------------------------------------------------------------------------

*相关标签：

label 标签：让文字与 input 标签绑定；两种绑定的方式：

datalist 标签：给输入框绑定输入的提示：<datalist><option>haha</option></datalist>
h5 中新增的 input 标签：email 、url 、number 、color、date（浏览器的支持不好）

3、非 input 标签

（1）select

（2）textarea

cols 和 rows 指定输入的行列，但是还是可以无限输入
默认可拉伸，也可通过 css 固定大小

4、练习

（1）表单标签除了 button 外都可以用 value 来指定提交的值

（2）表单添加边框可以在 form 中添加 fieldset 来实现

六、多媒体标签

1、video 标签

（1）格式：<video src=" " autoplay="autoplay"></video>；

（2）属性：controls（控制条）poster（海报）loop（循环）preload（预加载，与autoplay冲突）muted（静音）width/height；

（3）另一种 video 格式：解决浏览器的兼容

（4）让所有的浏览器支持 video 标签：通过 js 框架来实现

2、audio 标签

（1）使用基本和 video 一样，属性只有宽高和 poster 不能用，也是两种格式

3、details 和 summary 标签

（1）格式：

4、marquee标签（跑马灯效果）

（1）w3c 不推荐，但是浏览器的支持好

（2）属性：direction（方向）scrollamount（滚动的速度）loop（滚动次数，默认-1）behavior（滚动类型 slide）

（3）废弃的标签： <hr>加粗下划线斜体<s>删除线（无语义）

替代的标签：<ins><del>（加入了语义）

5、字符实体

（1）&nbsp；空格 &lt；&gt； &copy；版权符号

（2）理解：html 占用了的不显示的特殊字符用另外的代替符号表示，使他们正常在 html 页面上显示

TML常用标签

1. web标准

1.1 web标准的构成

主要包括结构、表现和行为三个方面。

标准说明结构用于对 网页元素 进行整理和分类（HTML）表现用于设置网页元素的 外观样式 （CSS）行为网页模型的定义及交互的编写（JavaScript）

如果将web标准比喻为一只鸟，则

结构=身体
表现=羽毛
行为=动作（飞行、站立等）

1.2 标签关系

双标签关系分为：

包含关系（父子）
并列关系（兄弟）

(1)包含关系

<!--head标签包含title标签-->
<head>
    <title></title>
</head>

(2)并列关系

<!--head标签与body标签并列-->
<head></head>
<body></body>

2. HTML基本结构

标签名定义<html></html>html标签<head></head>文档的头部<title></title>文档的标题<body></body>文档的主体

<!DOCTYPE html>   <!--文档类型声明标签-->  
<html lang="en">    <!--en:英语，zh-CN:中文-->
    
    <head>
        <!--字符集，UTF-8为万国码，统一使用-->
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
    </body>
    
</html>

3. HTML常用标签

3.1 标题标签

一个标题独占一行。（块级元素）

<h1>
    一级标题（字号最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
    六级标题（字号最小）
</h6>

3.2 段落标签

用于将HTML文档分割为若干段落。

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落之间有空隙

<p>
    这是一个段落
</p>

3.3 换行标签

用于强制换行。

特点：

单标签
换行没有像段落那样的空隙

<br>这是换行标签

3.4 文本格式化标签

语义标签加粗倾斜删除线<del></del>下划线<ins></ins>

3.5 盒子标签

用于界面布局。

特点：

div一行只能放一个（块级元素）
span一行可以放多个（行级元素）

<div>
    这是大盒子
</div>
<span>这是小盒子</span>

3.6 图像标签和路径

(1)图像标签

用于定义页面中的图像。

<!--属性与属性之间用空格分开-->
<img src="图像的url" alt="" title="">

属性说明src图片路径（ 必须属性 ）alt图像不能显示时的替换文本title鼠标放到图像上显示的提示文本width设置图像的宽度height设置图像的高度border设置图像的边框粗细（在CSS中修改）

注：图像的宽和高一般只修改其中一个，另一个会随之调整。

(2)路径

相对路径：文件相对于HTML页面的位置

相对路径分类符号说明同一级src="文件名"下一级/src="同一级文件夹名称/文件名"上一级../src="../文件名"

绝对路径：完整的路径名称（一般很少用）。eg. C:\xxx\xxxx.jpg

注意：绝对路径用“\”分隔，相对路径用“/”分隔。

3.7 超链接标签和链接分类

(1)超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性作用href链接目标的url（ 必须属性 ）target链接页面的打方式。_self：在当前窗口打开（默认值），_blank：在新窗口打开

(2)链接分类

外部链接：例如http://www.bilibili.com
内部链接：网站内部页面之间的相互链接，例如index.html
空链接：#
下载链接：地址里是一个文件或压缩包
网页元素链接：在网页中的各种网页元素都可以添加超链接
锚点链接：可以快速定位到页面中的某个位置链接：<a href="#名字"></a>找到目标位置标签，里面添加一个id属性，<h2 id="名字"></h2>返回顶部：<a href="#"></a>

3.8 注释和特殊字符

(1)注释

<!--这是一行注释-->

(2)特殊字符

注：重点记住前三个。

大家平时学习web前端的时候肯定会遇到很多问题，小编我为大家准备了web前端学习资料，将这些免费分享给大家！如果想要的可以找我领取

领取方式：

如果想获取这些学习资料，先关注我然后私信小编“01”即可免费领取！（私信方法：点击我头像进我主页右上面有个私信按钮）

如果这篇文章对你有帮助，请记得给我来个评论+转发噢

在线咨询

上一篇：Excel按单元格颜色求和的3种方法，你会哪种？
下一篇：不得不佩服，美观小巧的网页内容编辑器-ContentTools

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何处理html中内联元素之间水平空隙？

、html概述

二、基础标签

三、列表标签

四、表格标签

五、表单标签

六、多媒体标签

1. web标准

1.1 web标准的构成

1.2 标签关系

(1)包含关系

(2)并列关系

2. HTML基本结构

3. HTML常用标签

3.1 标题标签

3.2 段落标签

3.3 换行标签

3.4 文本格式化标签

3.5 盒子标签

3.6 图像标签和路径

(1)图像标签

(2)路径

3.7 超链接标签和链接分类

(1)超链接标签

(2)链接分类

3.8 注释和特殊字符

(1)注释

(2)特殊字符

您的项目需求