1

When I give a top-margin to .galeria element, why I get also the same top-margin in .sorial-grande element?

http://sorialconstrucciones.com/trabajos

.sorial-grande {
    position: absolute;
    right: 0;
    left: 0;
    background: url("/drawing.svg");
    background-repeat: repeat-x;
    height: 337px;
    background-position: center center;
  }
  .galeria {
    padding: 40px;
    clear: both;
    /*margin-top: 350px;*/
    img {
      width: 207px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }


<div class="sorial-grande"></div>
<section class="galeria">
  <img src="/images/00.jpg"></img>
  <img src="/images/02.jpg"></img>
</section>
tirenweb
  • 30,963
  • 73
  • 183
  • 303

3 Answers3

1

This is commonly known as margin collapse. Essentialy, as it goes on mdn, "Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing."

There are a few ways to get around it. In your case, easiest would be to add padding-top:1px to <main> tag

Community
  • 1
  • 1
Varinder
  • 2,634
  • 1
  • 17
  • 20
0

Change it from margin-top to padding-top

.galeria {
    padding-top: 350px;
}
Mitch
  • 1,374
  • 5
  • 21
  • 39
0

I think somewhere is repeating code because the watch file .css, I see more properties that you mention. If that is true, I think that commenting out these two lines, will fix your problem (if that's what you want).

main .sorial-grande {
   /* position: absolute; this line */
}

and 

main #galeria { 
    /* padding: 222px 40px 40px; */
}
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Ohz
  • 1
  • 1