CSS 상대 컨테이너가 margin-child-element로 축척되지 않습니다.

Question

다음과 같은 문제가 있습니다.

각 하위 요소에 여백이있는 상대 컨테이너 요소가 있어야합니다.

컨테이너의 높이를 설정하지 않으면 높이가 포함 된 자식에 의해 높이/너비가 조정됩니다.

문제는 그것의 여백을 무시하는 것 같습니다. 여기

일부 코드 : CSS :

.container{ 
    position:relative; 
} 

.child { 
    position:relative; 
    float:left; 
    width:200px; 
    height:50px; 
    margin-bottom:20px; 
} 

HTML :

<div class="container"> 
     <div class="child">hello world</div> 
    </div> 

컨테이너는 이제 크기를 조정해야 높이 + 20 = 70 픽셀 50, 그래서 다른 넣으면 그 아래에있는 요소는 괜찮지 만 그렇지 않습니다. 여백이 컨테이너 높이의 크기를 조정하지 않는 것 같습니다. 이것을 변경하는 방법은 무엇입니까?

Answer 1

귀하의 질문에 조용하고 잘 받고 있지만, 당신은 아마 당신의 floats ...

Demo 또는

.container{ 
    position:relative; 
    border: 1px solid #f00; 
    overflow: hidden; 
} 

당신은 또한 따라 clear: both;

Demo

Answer 2

을 사용할 수 있습니다 취소 누락되지 않음 당신이 달성하려고하는 효과 중 하나 :

1) '오버플로 : 숨겨진'추가

또는

2

)가 .child div의