html書寫行內元素時-tab和換行會在行內元素間引入間距

目錄

• html文本中的控制字符會被解析為文本節點
• 書寫行內元素時,換行符LF與水平制表符HT會引入莫名的元素間間隔
• 其他控制字符是否會引入間距的驗證

html文本中的控制字符會被解析為文本節點

舉例:

• html部分

<div id="container">
	<div class="item"></div>
	<div class="item"></div>
</div>

• css部分

@charset utf-8;

* {
	margin: 0px;
	padding:0px;
}

#container {
	display: inline-block;
}

.item {
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 2px solid black;
}

• js部分

window.onload=function(){
	var container = document.getElementById("container");
	var children = container.childNodes;
	console.log(children);
}

頁面效果:

其中,各個text文本節點的值:

0: "↵ "(換行LF加縮進HT)

2: "↵ "(換行LF加縮進HT)

4: "↵"(換行LF)

完全對應了我們html源碼中的換行縮進等操作.

---

書寫行內元素時,換行符LF與水平制表符HT會引入莫名的元素間間隔

1.實例: 還是上一節的例子.

注意上一節的css部分中,我們是將所有元素的內外邊距都設為0了,但是在出來的頁面里,兩個行內元素的盒子之間還是有一個小的間隔.

而塊級元素的上下兩個盒子之間就不會出現這樣的問題.這說明換行LF和縮進HT的文本節點在行內元素之間表現為一個小的間距.

2.引入間距的尺寸大小

我們打開開發者工具,看下各個盒子的尺寸.

container盒子:

兩個.item盒子:

間距的尺寸: 216-104×2=8px

我們在最后一個.item盒子的后面加一個文本字母x,即:

<div id="container">
	<div class="item"></div>
	<div class="item"></div>x
</div>

再來看各個盒子的尺寸:

container盒子:

兩個.item盒子:

還有上面計算的間距尺寸: 8px

文本字母的尺寸: 224-104×2-8=8px

結論: 引入的間距尺寸,也就是控制字符文本節點在行內元素之間的表現為一個英文字符.

我們將#container盒子的字體大小font-size設為0,看是否能消除間距:

#container {
	display: inline-block;
	font-size: 0;
}

結果:

3.間距引入手段有哪些

• 在html源碼中使用HT與LF
• 在html源碼中使用LF與HT對應的unicode(語法: &# + 10進制的unicode編碼 + 英文分號;)
• 在js中使用LF與HT對應的unicode(語法: \u + 16進制的unicode編碼)

4.引入控制字符的組合會有什么效果

我們修改html部分如下:

<div id="container">
	<div class="item"></div>&#9;&#9;&#9;&#10;&#10;&#10;<div class="item"></div>
</div>

然后注釋掉font-size=0的css,查看頁面效果:

其中,2:text的nodeValue值為"      ↵↵↵"(三個HT,三個LF),但是具體的頁面表現仍為8px的間距.

---

其他控制字符是否會引入間距的驗證

• html部分

<div id="container">
	<div class="item"></div>點擊按鈕替換此處值<div class="item"></div>
</div>
<br>
<button class="btn" id="btn">點擊插值</button>
<button class="record" id="record">記錄有效值</button>
<div class="result" id="result"></div>

• css部分

@charset utf-8;
* {
	margin: 0px;
	padding:0px;
}

#container {
	display: inline-block;
}

.item {
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 2px solid black;
}

.btn {
	width:100px;
}

.result {
	display: inline-block;
	min-width: 100px;
}

• js部分

window.onload=function(){

	var container = document.getElementById("container");
	var children = container.childNodes;

	//編制0-31的unicode碼表
	var tab=["\u0000","\u0001","\u0002","\u0003","\u0004","\u0005","\u0006","\u0007",
"\u0008","\u0009","\u000A","\u000B","\u000C","\u000D","\u000E","\u000F","\u0010",
"\u0011","\u0012","\u0013","\u0014","\u0015","\u0016","\u0017","\u0018","\u0019",
"\u001A","\u001B","\u001C","\u001D","\u001E","\u001F"];

	//插值按鈕:點擊按鈕,依次將tab表中的unicode插入html中的指定位置
	var btn = document.getElementById("btn");
	var count = 0; //計數器(當前unicode的10進制值)
	btn.onclick = function (){
		children[2].textContent = tab[count];
		btn.innerHTML = count; //將當前unicode10進制值顯示在按鈕上
		count++; //下一次點擊事件的unicode的10進制值
	}

	//結果輸出
	var record = document.getElementById("record");
	var result = document.getElementById("result");
    //當出現間距時,手動點擊record按鈕,將此時unicode十進制值添加到result中
	record.onclick = function(){
		result.innerHTML += (btn.innerHTML + " " );
	}

}

測試結果:

結論: 0~1F,共32個控制字符之中,僅有HT和LF能使行內元素間出現間距.