여백 가기가

Question

이외의 요소에 영향을줍니다. top-margin을 .galeria 요소에 줄 때 왜 요소에도 같은 top-margin이 표시됩니까?

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> 

Answer 1

변경이

.galeria { 
    padding-top: 350px; 
} 

Answer 2

나는 감시 파일 .CSS, 나는 당신이 언급 이상의 속성을보기 때문에 어딘가에 코드를 반복 생각합니다. 그것이 사실이라면, 나는이 두 줄을 주석으로 처리하여 문제를 해결할 것이라고 생각한다.

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

및

main #galeria { 
    /* padding: 222px 40px 40px; */ 
} 

Answer 3

이 일반적 마진 붕괴로 알려져 있습니다. 에센셜 (Simentiality)은 mdn에서 "블록의 위쪽과 아래쪽 여백이 때로는 결합 된 여백 중 가장 큰 여백으로 결합 (축소)됩니다.이 동작은 여백 붕괴로 알려져 있습니다."

주위를 둘러 쌀 수있는 소수는 ways입니다. 귀하의 경우 가장 쉬운 방법은 padding-top:1px을 <main> 태그

에 추가하는 것입니다.