Jose Antonio Jose Antonio - 6 months ago 11
CSS Question

adjust margin in just 1 div

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

Answer

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> 

Comments