负边距的妙用：让你的网页设计更出彩！

前端

2023-09-06 23:23:35

利用 CSS margin 负值的力量

在 CSS 中，margin 属性就像元素周围的舒适毯子，为其提供与周围元素之间所需的呼吸空间。虽然正值 margin 会让元素向外扩展，但负值 margin 却是一个秘密武器，可以将元素向内收缩。

负 margin 的妙用

负 margin 通常被用来：

消除元素重叠。 厌倦了元素之间相互推挤？使用负 margin 将它们巧妙地分开。
创造重叠效果。 想让元素调皮地重叠？负 margin 会让它们看起来融为一体。
调整元素位置。 不满意元素的位置？负 margin 会轻松地将其移动到更合适的位置。
构建复杂布局。 从网格布局到弹性布局，负 margin 可以让你自由发挥创意，构建更精美的布局。

负 margin 实操示例

消除元素重叠：

<div class="box">
  <div class="sub-box"></div>
</div>

.box {
  display: flex;
  flex-direction: column;
}

.sub-box {
  height: 100px;
  background-color: red;
}

.sub-box {
  margin-top: -50px;
}

瞧！sub-box 巧妙地向上移动，消除了与 box 的重叠。

创建重叠效果：

<div class="box">
  <div class="sub-box"></div>
</div>

.box {
  display: flex;
  flex-direction: column;
}

.sub-box {
  height: 100px;
  background-color: red;
}

.sub-box {
  margin-left: -50px;
}

这次，sub-box 偷偷地向左移动，与 box 实现了完美的重叠。

调整元素位置：

<div class="box">
  <div class="sub-box"></div>
</div>

.box {
  display: flex;
  flex-direction: column;
}

.sub-box {
  height: 100px;
  background-color: red;
}

.sub-box {
  margin-bottom: -50px;
}