关于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>

结果呢也还算能接受:

html行内块元素之间的缝隙-LMLPHP

html行内块元素之间的缝隙-LMLPHP

但是,我发现了另外一个问题:

html行内块元素之间的缝隙-LMLPHP

html行内块元素之间的缝隙-LMLPHP

这之间的缝隙是什么东东?琢磨了好久也不知道。希望读者中有知道的麻烦评论告诉我一下,谢谢啦。

html行内块元素之间的缝隙-LMLPHP

05-18 03:21