[分享]css两个板块间隔

在网页设计中，往往需要对不同板块之间进行间隔，这样可以使网页看起来更加美观舒适。在 CSS 中，通过 margin 和 padding 两种属性可以轻松的实现间隔的效果。p { marginbotto...

在网页设计中，往往需要对不同板块之间进行间隔，这样可以使网页看起来更加美观舒适。在 CSS 中，通过 margin 和 padding 两种属性可以轻松的实现间隔的效果。

p {
  margin-bottom: 20px;
} 

上面的代码表示在每个 p 标签元素下方添加 20px 的 margin-bottom 间隔。同样地，我们也可以为其他元素添加间隔，如：

h1 {
  margin-bottom: 50px;
}

div {
  padding: 10px;
} 

h1 元素会在其下方添加 50px 的 margin-bottom 间隔，而 div 元素则会在其内部添加 10px 的 padding 间隔。

需要注意的是，margin 和 padding 属性不仅可以用于上下左右方向的间隔，还可以指定某个方向的间隔，如：

p {
  margin-bottom: 20px;
  margin-right: 10px;
}

div {
  padding-left: 20px;
} 

上面的代码表示每个 p 元素下方添加 20px 的 margin-bottom 间隔和 10px 的 margin-right 间隔，而 div 元素则会在其左侧添加 20px 的padding-left 间隔。

在进行间隔设计时，需要注意不同层级之间的影响。例如：

.outer div {
  margin-bottom: 20px;
}

.inner div {
  margin-bottom: 10px;
} 

上面的代码表示在外层元素和内层元素内，都有 div 元素。其间隔均为 margin-bottom。在这种情况下，内层元素样式会优先于外层元素样式生效。因此，要根据实际情况进行层级间隔设计。