adjust margin in just 1 div

Question

Well, now I've this problem, I want to adjust just the margin on the "c2" but when I set it to X, it changes the "c1" div margin :S

Here's the code I'm using:

<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%; }

score 1 · Answer 1 · answered Jun 01 '16 at 20:38

1

Ah. You're looking for

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

This behavior is due to the collapsing margins part of the box model spec. Putting overflow: auto|hidden|overlay on the parent will establish a new block formatting context and stop the margins from collapsing.

answered Jun 01 '16 at 20:38

bowheart

4,616
2
27
27

Thanks, it helped me a lot :P – Jose Antonio Jun 01 '16 at 20:48

score 0 · Accepted Answer · answered Jun 01 '16 at 20:37

This is because the border of the c1 and c2 are collapsing. You have to hide the overflow (with overflow: hidden or any overflow different that default, which is visible) of the container to avoid that the c1 also get the margin of c2.

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>

Thanks, this worked fine :) Thanks a lot :P – Jose Antonio Jun 01 '16 at 20:47 — Jose Antonio, Jun 01 '16 at 20:47
@JoseAntonio You are welcome :) – Francisco Romero Jun 01 '16 at 20:48 — Francisco Romero, Jun 01 '16 at 20:48

score 0 · Answer 3 · answered Jun 01 '16 at 20:42

I assume you mean when you change the margin-top on the div.c2 your div.c1 also shifts down. This is due to the default definition of a div+div construct.

To achieve what you want you will need to create the following extra css definition on your div.c1:

display: inline-block;

Have a look at this codepen: http://codepen.io/anon/pen/beNjbW

score 0 · Answer 4 · answered Jun 01 '16 at 20:57

Difference of or greater margin of c1 or c2 will be rendered due to collapsible margins.

In this case your total distance will be 0 (they cancel each other):

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

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

In this case your distance will be 10px from the top:

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

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

One of top margins can be omitted in this case. You can control the distance to header by adjusting margin-top of either one

codePen example

adjust margin in just 1 div

CSS

4 Answers4