另一个减边距div内的减边距[重复]

Posted

技术标签:

【中文标题】另一个减边距div内的减边距[重复]【英文标题】：minus margin inside another minus margin div [duplicate] 【发布时间】：2019-08-30 12:25:36 【问题描述】：

我给.box2 的工作提供了负边距，但其中的内部 div .slide 不工作我希望 .slide 移动到 .box2 上方。

这是我尝试过的 jsfiddle 链接，请提出一些想法。enter link description here

这可能与边距本身有关，而不是与顶部有关吗？ 如果不可能，请指出。

.full-width

  width:100%;
  padding:0;
  margin:0;
  position:relative;

.box-width

  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;

.box2

  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;

.slide

  max-width:200px;
  margin:-25px auto 0 auto;
  height:60px;
  background:orange;

.slide1
  float:left;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"><p> I want this div above than the red div</p ></div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

你好。你的问题是答案？ ?? @ЮрийСветлов 【参考方案1】：

我认为这个问题可能与margin collapse 有关。

父母和第一个/最后一个孩子 如果没有边框、填充、内联部分、创建的块格式上下文或 clearance 将块的 margin-top 与其第一个子块的 margin-top 分开......那么这些边距坍塌。折叠的边距最终在父级之外。

在父子之间添加某种间隙可以防止崩溃。 这里有几个methods：

填充

.full-width 
  width: 100%;
  padding: 0;
  margin: 0;


.box-width 
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;


.box2 
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
  padding-top: 1px;


.slide 
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

边框

.full-width 
  width: 100%;
  padding: 0;
  margin: 0;


.box-width 
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;


.box2 
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
  border-top: 1px solid transparent;


.slide 
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

伪元素

.full-width 
  width: 100%;
  padding: 0;
  margin: 0;


.box-width 
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;


.box2 
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;


.box2:before,
.box2:after 
  content: ' ';
  display: table;


.slide 
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

【讨论】：

【参考方案2】：

您可以使用 CSS 位置属性：

.full-width

  width:100%;
  padding:0;
  margin:0;
  position:relative;

.box-width

  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;

.box2

  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;
   position: relative;
  z-index: 1;

.slide

  max-width:200px;
  height:60px;
  background:orange;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;

.slide1
  float:left;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"><p> I want this div above than the red div</p ></div>
    </div>
  </div>
</body>
</html>

【讨论】：

【参考方案3】：

试试这个

.slide 
    max-width: 200px;
    margin: -25px auto 0 auto;
    height: 60px;
    background: orange;
    position: relative;
    top: -50px;

【讨论】：

以上是关于另一个减边距div内的减边距[重复]的主要内容，如果未能解决你的问题，请参考以下文章

元素边距推送父元素[重复]

CSS网格，插入图像时底部的边距[重复]

仅在 1 div 中调整边距 [重复]

为啥不针对直接父级计算 div 边距 [重复]

如何在 Flexbox 中的两个 div 之间添加边距/空格 [重复]

给子div相对于父div的边距[重复]