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

Question

好吧，现在我遇到了这个问题，我只想调整“c2”上的边距，但是当我将它设置为 X 时，它会改变“c1”的 div 边距：S

这是我正在使用的代码：

<header>
    <div class="jumbotron">
        <center><h1>Bienvenidos a JVasconcelos.me</h1></center>
    </div>
</header>
<div class="container">
    <div class="row">
        <div class="col-md-12 col-centered">
            <div class="c1">
                <div class="c2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>  

CSS

div.c1 { height: 100vh; background: #417ba1; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 0px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }

Answer 1

c1 或 c2 的差异或更大的边距将由于可折叠边距而呈现。

在这种情况下，您的总距离将为 0（它们相互抵消）：

div.c1 {
  margin-top: -30px;
}

div.c2 {
  margin-top: 30px;
}

在这种情况下，您的距离将是距顶部 10 像素：

div.c1 {
  margin-top: -30px;
}

div.c2 {
  margin-top: 40px;
}

在这种情况下，可以省略其中一个上边距。您可以通过调整其中一个的 margin-top 来控制到标题的距离

codePen example

Answer 2

我假设您的意思是当您更改 div.c2 上的 margin-top 时，您的 div.c1 也会向下移动。这是由于 div+div 构造的默认定义。

要实现您想要的，您需要在 div.c1 上创建以下额外的 css 定义：

display: inline-block;

看看这个codepen：http://codepen.io/anon/pen/beNjbW

Answer 3

啊。你在寻找

.c1 {
    overflow: auto; // or hidden or overlay
}

这种行为是由于盒子模型规范的collapsing margins 部分造成的。将overflow: auto|hidden|overlay 放在父级上将建立一个新的块格式化上下文并阻止边距折叠。

Answer 4

这是因为c1 和c2 的边界是collapsing。您必须隐藏容器的overflow（使用overflow: hidden 或任何与默认值不同的溢出，这是可见的）以避免c1 也得到c2 的margin。

div.c1 { height: 100vh; background: #417ba1; overflow: hidden; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 20px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }

<header>
    <div class="jumbotron">
        <center><h1>Bienvenidos a JVasconcelos.me</h1></center>
    </div>
</header>

<div class="container">
    <div class="row">
        <div class="col-md-12 col-centered">
            <div class="c1">
                <div class="c2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>