표제의 불일치 한 여백은 어디서 비롯된 것입니까?

이 예에서 http://dabblet.com/gist/708f69e9c5352f67f514 "Article 1"이라는 제목은 일관되게 푸시 다운되지만 "Intro"및 "Article 2"와 같은 높이에 나타나야합니다. 이 마진은 어디서 비롯된 것입니까? h1 스타일을 h1 {margin-top: 0}으로 변경하면 모든 제목이 수평 정렬로 표시되지만 h1 {margin-top: 60px}과 같이 더 높은 값을 사용하면 항상 불일치가 나타납니다. 무슨 일 이니? 이 성가신 불일치가없는 마진을 어떻게 사용할 수 있습니까?표제의 불일치 한 여백은 어디서 비롯된 것입니까?

강령 : 다음 컨테이너를 설정 떠 열 오버 플로우에 대한

.wrapper { 
    position: relative; 
} 

.left { 
    position: relative; 
    width: 380px; 
} 

.right { 
    position: absolute; 
    margin-left: 460px; 
    top: 0; 

     -moz-column-count: 2; 
     -webkit-column-count: 2; 
     column-count: 2; 

     column-gap: 40px; 
     -moz-column-gap: 40px; 
     -webkit-column-gap: 40px; 
} 

h1 { 
    margin-top: 36px; 
} 


<body> 
    <div class="wrapper"> 
     <div class="left"> 
      <article> 
       <h1>Intro</h1> 
       <p>Llorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p> 
      </article> 
     </div> 

      <div class="right"> 
       <article> 
        <h1>Article 1</h1> 
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,.</p> 
       </article> 
       <article> 
        <h1>Article 1</h1> 
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,.</p> 
       </article> 
      </div> <!-- ds-right --> 
    </div> 
</body>

출처

2014-08-27 Madamadam

다음과 같은 [링크] (http://dabblet.com/gist/466ed90e18afea9d0956)? – Malcolm

아니요, h1의 margin-top에 77px 값 (예 :)을 추가하면 불일치가 다시 나타납니다. – Madamadam

먼저 당신이 그렇게 p,h1{margin:0} 같은 h1 및 p 태그에있는 여백을 다시 설정해야합니다 : 숨겨져있는 것 용기 수레

출처

2014-08-27 18:37:59

답안을 이해할 수 없습니다. 예제 견본 복사본을 만들 수 있습니까? – Madamadam

좋아, 알았다. 귀하의 솔루션이 작동합니다. 배경 정보는 다음과 같습니다. http://colinaarts.com/articles/the-magic-of-overflow-hidden/ – Madamadam

표제의 불일치 한 여백은 어디서 비롯된 것입니까?

답변

관련 문제