자식 요소 상속 너비 문제

Question

그래서 컨테이너에 요소가 있고 conatiner에서 너비를 상속하는이 이상한 문제가 발생합니다.

나는 이걸 수정하려고하는데 CSS의 너비 속성을 원하는대로 설정했습니다. 브라우저에서 미리보기로 이동하면 너비가 올바르게 조정되지만 오른쪽 여백을 확장하여 컨테이너를 채 웁니다.

margin-right : 0과 같은 작업을하여 이것을 상쇄하려고했습니다. 음수 값을 사용하지만 아무 것도 작동하지 않습니다.

Answer 1

자식의 너비는 부모로부터 결코 상속되지 않습니다 (부모에 지정된 정확한 값)! 그러나 은 부모의 너비에 따라입니다. 부모에 너비를 지정하고 블록 수준의 하위 항목이있는 경우 항상 부모 너비의 100 %로 확장됩니다. 그것은 완전히 정상적인 행동입니다.

하위 요소에 명시적인 너비를 설정하면 여백과 테두리이 표준 너비 모듈을 사용하여 전체 너비에 포함되지 않는다는 것을 알고 있어야합니다. 당신은 두 가지 옵션이 있습니다

• 계정 패딩
• 변경 상자 - MODELL을

는 CSS : 그러나

#parent{ 
    width:100px; 
} 
#child{ 
    padding:10px; 
    width:100px; /* child will be 20px too wide */ 
} 
/*method 1*/ 
#child{ 
    padding:10px; 
    width:80px; /* child will fit perfectly: 80px +10px + 10px */ 
} 
/* method 2*/ 
#child{ 
    padding:10px; 
    width:100px; 
    box-sizing:border-box;  /* child will fit perfectly 
           width now includes content and padding */ 
    -moz-box-sizing:border-box; /* for compatibility*/ 
    -webkit-box-sizing:border-box; 
} 

노트, box-sizing이 새로운 CSS-속성이라고하고 모든 브라우저가이를 처리 할 수있는 것은 아닙니다.