떠 다니는 요소가 왼쪽 및 오른쪽 여백을 설정할 수없는 이유

Question

래퍼 div에서 부유 요소가 왼쪽 및 오른쪽 여백 설정에 응답하지 않는 것 같습니다. 예 :

HTML :

<div id ="wrapper"> 
    <div id = "content"></div> 
</div> 

CSS :

#wrapper 
{ 
    width:  1000px; 
    display:   block; 
    margin-left:   auto; 
    margin-right: auto; 
    overflow:   hidden; 
} 

#content 
{ 
    width:    400px; 
    height:    200px; 
    display:    block; 
    float:    left; 
    margin-left:   30px; 
} 

#content는 왼쪽 여백 설정을 무시합니다. 왜?

Answer 1

여백은 부유 요소를 이동하지 않으므로 내용을 밀어냅니다.

당신이 떠 요소를 이동하려면, 다음과 같은 CSS 규칙 그것을 줄 수 :

#content { 
    position: relative; 
    left: 30px; 
} 

대안은 요소에게 투명 국경주고있다 : 당신이 경우

#content { 
    border-left: 30px transparent; 
} 

을 div을 다른 div 안에 배치하려면 절대 위치 지정을 사용하십시오.

Answer 2

@ Marcus의 대답이 좋습니다. 떠 다니는 요소에 여백을 가짜로 만드는 또 다른 방법은 내용을 다른 컨테이너 안에 넣고 패딩을 사용하는 것입니다.

.outer 
{ 
    float: left; 
    padding: 10px; 
} 

.inner 
{ 
}