CSS两个块增加距离|极客教程

CSS两个块增加距离

在网页设计中，我们经常需要调整页面元素之间的距离，以便让页面看起来更加美观和整洁。其中，CSS中的margin和padding属性可以帮助我们实现这一目的。本文将详细介绍如何使用CSS来增加两个块之间的距离。

1. margin属性

1.1 什么是margin属性

在CSS中，margin指的是元素与其周围元素之间的距离。设置了margin后，可以控制元素的外边距，从而调整元素与周围元素之间的距离。

1.2 如何设置margin属性

可以通过以下方式设置margin属性：

.element {
  margin: 10px; /* 将元素的上下左右外边距都设置为10px */
}

也可以分别设置上、右、下、左四个方向的外边距：

.element {
  margin-top: 10px; /* 上外边距为10px */
  margin-right: 20px; /* 右外边距为20px */
  margin-bottom: 15px; /* 下外边距为15px */
  margin-left: 30px; /* 左外边距为30px */
}

1.3 示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin示例</title>
  <style>
    .block1 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-right: 20px;
    }
    .block2 {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="block1"></div>
  <div class="block2"></div>
</body>
</html>

在上面的示例中，block1和block2之间的距离为20px，这是因为我们给block1设置了右外边距为20px。

2. padding属性

2.1 什么是padding属性

在CSS中，padding指的是元素内边距，即元素内容与边框之间的距离。通过设置padding，可以调整元素内部内容与边框的间距。

2.2 如何设置padding属性

可以通过以下方式设置padding属性：

.element {
  padding: 10px; /* 将元素的上下左右内边距都设置为10px */
}

也可以分别设置上、右、下、左四个方向的内边距：

.element {
  padding-top: 10px; /* 上内边距为10px */
  padding-right: 20px; /* 右内边距为20px */
  padding-bottom: 15px; /* 下内边距为15px */
  padding-left: 30px; /* 左内边距为30px */
}

2.3 示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Padding示例</title>
  <style>
    .block1 {
      width: 100px;
      height: 100px;
      background-color: red;
      padding-right: 20px;
    }
    .block2 {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="block1"></div>
  <div class="block2"></div>
</body>
</html>