做个网页，每排三个图片，每个图片间隔20PX，一共3排图片，最上面间隔50PX，背景色为黑色

你可以尝试以下 HTML 和 CSS 代码实现：

HTML 代码：

<div class="image-grid">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
  <img src="image5.jpg">
  <img src="image6.jpg">
  <img src="image7.jpg">
  <img src="image8.jpg">
  <img src="image9.jpg">
</div>

CSS 代码：

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: black;
  padding: 50px 20px 0 20px;
}

.image-grid img {
  width: calc(33.33% - 13.33px);
  margin-bottom: 20px;
}

解释：

- 使用 `display: flex` 将图片容器设置为弹性盒子，使其内部元素可以通过 `flex` 属性控制排列方式。
- 使用 `flex-wrap: wrap` 将元素换行排列。
- 使用 `justify-content: space-between` 将元素沿主轴均匀分布。
- 使用 `background-color` 设置背景色为黑色。
- 使用 `padding` 设置顶部留白为50px。
- 使用 `width` 设置每个图片占据容器的1/3宽度减去20px间隔（即每行三个图片，两个间隔，容器总共有20px的padding）。
- 使用 `margin-bottom` 设置图片间隔为20px。