여백이 붕괴되는 것을 막을 수 없습니다.

Question

호버업 div 메뉴가 해당 컨테이너에서 빠져 나오도록해야했기 때문에 오버플로 : 컨테이너가 표시되고 작동하지만 이제 컨테이너의 마진은 바닥에서 사라졌습니다. 다음 목록의 나머지.

나는 this question과 this one을 읽었으며 몇 가지 다른 기사를 읽었으며 다른 요소에서 언급 된 패딩과 HTML 코드를 넣으려고했지만 특정 경우에 잘못 될 수는 없습니다.

URL은 http://melopienso.com/testingtwo/shop/이고 각 "ul.products li"에는 아래쪽 여백이 있어야합니다.

아이디어가 있으십니까? 당신의 도움을 주셔서 대단히 감사합니다!

Answer 1

문제는 margin-bottom에있는 요소를 떠올리게한다는 것입니다. 그러므로 그들은 부모의 신장을 연장하지 않습니다. 그래서 부모님의 여백이라면 떠 다니는 요소의 "아래"에있게됩니다. 귀하의 경우에 대한

설명 : a 및 gk-columns : 귀하의 예를 li.product에서

2 명의 아이들이있다. .gk-columns에는 부양 된 자식 만 있으므로 부양 된 요소는 부모의 높이를 확장하지 않으므로 높이가 0입니다. 따라서 li.product의 높이는 a 태그 (28px)로만 확장됩니다.

그래서 당신은 li.product에 margin-bottom:50px;를 aply 경우는 떠 DIV의 높이보다 낮은 경우에만

28px + 50px = 78px 

의 내용을 밀어 것입니다.

당신은 몇 가지 솔루션으로이 문제를 해결 할 수 있습니다

솔루션 1 귀하의 예를 들어 이런 식으로 떠 요소에 margin-bottom을 추가

.gk-columns>div{ 
    margin-bottom:50px; 
} 

해결 방법 2 높이의 경우 children 요소는 고정되어 있습니다. 부모 요소의 높이를 설정하면 float 된 자식의 높이가 다음과 같이 포함됩니다.

.gk-columns{ 
    height:159px; 
}