如下的代码在页面上显示一系列的颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="color-container">
<div class="color color-black"></div>
<div class="color color-blue"></div>
<div class="color color-red"></div>
<div class="color color-yellow"></div>
<div class="color color-green"></div>
<div class="color color-brown"></div>
</div>
</body>
</html>
CSS:
.color-container {
background-color: pink;
/* font-size:0; */
}
.color {
padding: 40px;
display: inline-block;
}
.color-black {
background-color: black;
}
.color-blue {
background-color: blue;
}
.color-red {
background-color: red;
}
.color-yellow {
background-color: yellow;
}
.color-green {
background-color: greenyellow;
}
.color-brown {
background-color: brown;
}
但是，颜色盒子之间有空白：
假如想要取消这些空白：
方法1： Html 中的颜色 div 连着写，中间不加空格，例如：
<div class="color color-black"></div><div class="color color-blue"></div>
但是这样代码没有格式，而且使用prettier会自动将其又改回原来换行的格式，此方法不好。
方法2： 设置 parent 字体大小为 0，即使用如下代码：
.color-container {
background-color: pink;
font-size: 0;
}
然后相邻的空白全部被取消：
多个image之间也会有类似的小的空白，是因为 image 默认是 inline 元素，如果将 image 设为 block，那么这些空白就会消失。
.color-container {
background-color: pink;
/* font-size:0; */
display:flex;
}
.color {
padding: 40px;
display: block;
}
806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
