css上下区块的距离

CSS上下区块的距离是网页设计中非常重要的一部分，它可以影响页面的整体美观度和用户体验。在本文中，我们将探讨几种CSS方式来调整上下区块的间距。

方法一：
通过给上下区块添加margin属性来控制它们之间的间距，使用下面的代码实现：

.block-1 {
  margin-bottom: 20px;
}

.block-2 {
  margin-top: 20px;
}

方法二：
使用padding属性来增加上下区块之间的空间。注意这会改变区块本身的大小，使用下面的代码实现：

.block-1 {
  padding-bottom: 20px;
}

.block-2 {
  padding-top: 20px;
}

方法三：
使用CSS Flexbox布局方法来布置页面，它允许你通过设置flex属性来控制子元素之间的间距，使用下面的代码实现：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.block-1 {
  flex: 1;
}

.block-2 {
  flex: 1;
} 

上面三种方法都可以用来控制上下区块之间的间距。无论你选择哪一种方法，重要的是确保你的网站在各种屏幕大小和浏览器之间的表现一致。