Margen-top of DIV daughter drives her away and DIV father together

Asked

Viewed 521 times

0

I’m hoping that the #div1 get away from #fisrt and does not lead to #second together, but it’s not working with margin-top: 5px; in #div1;. That is, between the junction of the #first with the #second I want the #div1 move away 5px without taking the #second.

Follows the code:

 * {
     margin: 0 auto;
     padding: 0 0 0 0;
 }
    
 #first {
     background: blue;
     width: 100%;
     height: 34px;
 }
            
 #second {
     background-color: gray;
     width: 100%;
     height: 100%;
     background: red;
 }
    
 #div1 {
     background: green;
     width: 200px;
     height: 30px;
     margin-top: 10px;
 }
<div id="first">
</div>
<div id="second">
    <div id="div1"> Destaques </div>
</div>

html css

3 answers

2


I believe it’s because of the box-model: "margin-top" and "margin-bottom" overlapping, why?

In case just add a pixel in the #second which should solve, also recommend not adding margin: 0 auto on the global selector.

In case add padding-top: 1px; and instead of margin-top: 10px;, swap for margin-top: 9px; to compensate for the 1px

Extra: Put the margin: 0 auto; only in the #div1, since he is the one who needs to be aligned in the center:

* {
     margin: 0;
     padding: 0;
}

#first {
     background: blue;
     width: 100%;
     height: 34px;
}
       
#second {
     background-color: gray;
     width: 100%;
     height: 100%;
     background: red;
     padding-top: 1px;
}

#div1 {
     background: green;
     width: 200px;
     height: 30px;
     margin: 0 auto;
     margin-top: 9px;
}
<div id="first"></div>

<div id="second">
    <div id="div1"> Destaques </div>
</div>

  • William hello, why not just do: margin: 9px auto 0 auto;? You didn’t need to shoot margin-top: ... afterward

  • @Miguel may be, anyway I left as it was for the author better understand the example

1

You need to set a position for the div #Second. In case.. Just put float: left in div #Second.

 * {
     margin: 0 auto;
     padding: 0 0 0 0;
 }

 #first {
     background: blue;
     width: 100%;
     height: 34px;
 }

 #second {
     background-color: gray;
     width: 100%;
     height: 100%;
     background: red;
     float: left;
 }

 #div1 {
     background: green;
     width: 200px;
     height: 30px;
     margin-top: 10px;
 }

<div id="first">
</div>
<div id="second">
    <div id="div1"> Destaques </div>
</div>

  • It worked tbm. And it looks like it’s a better solution than the top one. But I’m not sure. Thank you.

  • @Amzero float also works, you can also use the overflow, but I did not mention such techniques because they can cause you other problems and difficulties if they are not applied well.

0

I made a small example, which does not move the Ivs first and second, only the daughter div with the property position: absolute. I imagine that’s what you were looking for.

 * {
     margin: 0 auto;
     padding: 0;
 }

#first, #second {
     width: 100%;
     height: 34px;
     position: relative;
}
 #first {
     background: blue;
 }
            
 #second {
     background: red;
 }
    
 #div1 {
     position: absolute;
     top: 15px;
     left: calc(50% - 100px);
     background: green;
     width: 200px;
     height: 30px;
 }
<div id="first"></div>
<div id="second">
  <div id="div1"> Destaques </div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.