關於html行內塊元素之間縫隙的那點兒事情
事情是這樣子的,我起初打算驗證使用transform
屬性的標簽是否會影響其他的標簽的布局,於是寫了下面一段代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum=1.0, minimum=1.0, scalable=0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/* 轉換顯示模式設置寬高 */
display: inline-block;
width: 100px;
height: 100px;
}
.a {
transform: translateX(100px);
background-color: red;
}
.b {
background-color: blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
結果呢也還算能接受:
但是,我發現了另外一個問題:
這之間的縫隙是什么東東?琢磨了好久也不知道。希望讀者中有知道的麻煩評論告訴我一下,謝謝啦。