如何處理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)特殊字符

您的項目需求