CSS : 100 % 너비와 마진

.a{ 
     width: 100%; 
    background-color: #eee; 
    margin-left: 200px; 
}

나는 창문의 100 %를 의미한다 "폭 100 %"를 기다리고 있었다에서 예제를 참조하십시오,하지만 난을 추가 할 때 분명히 아니에요 그것에 마진. 나는 이것을 이해하기 어렵다는 것을 알았다.

상자와 여백의 정확한 관계는 무엇입니까? 이것에 대한 서면 규칙이 있습니까?

출처

2014-10-14 user1187968

기본적으로 요소의 '너비'는 테두리, 여백 또는 안쪽 여백이 아닌 내용 만 설명합니다. 그래서 여백을 추가하면 요소 너비가 증가합니다. 다음과 같이하면 도움이 될 수 있습니다. [MDN Box Model] (https://developer.mozilla.org/en-US/docs/Web/CSS/box_model) – showdev

width: 100%' does mean 예를 들어, 문서의 너비는 100 %이지만 요소의 너비를 제한하는 여백도 설정해야합니다. 제거하면 어떻게되는지보십시오.

출처

2014-10-14 22:09:44 dramzy

는 다음

.class{ 
    width:100%; 
    padding-left:200px; 
    box-sizing:border-box; 
}

마진가 상자 밖으로 여분의 공간을 추가하려고합니다. width 콘텐츠 상자의 너비를 정의 간단히 http://www.w3.org/TR/CSS2/box.html

출처

2014-10-14 22:17:36

여백이 테두리 상자 외부에 있으므로 여백이 테두리 상자 밖에 있습니다. 요소의 전체 너비 (여백 포함)가 뷰포트의 100 %를 초과합니다. – Terry

귀하의 질문은 CSS 사양에 자세히 설명되어있는 CSS 박스 모델에 관한 것입니다. 패딩을 추가 할 경우 테두리가 이고 여백이있는 경우 블록 상자의 전체 너비는 패딩, 테두리 및 여백으로 인해 콘텐츠 상자의 너비에 의 너비가 더한 값입니다.

height에 대해서는 패딩 및 경계 너비가 블록의 전체 높이에 추가됩니다. 그러나 여백은 인접한 블록의 여백과 함께 붕괴 될 수 있습니다. 이는 다른 주제를 참조하십시오 (접음 마진 참조).

또 다른 개념은 인 블록 서식 지정 컨텍스트로, 은 떠 있거나 배치 될 수있는 요소를 처리 할 때 작동합니다.

귀하의 예에서 왼쪽 여백으로 인해 a 요소의 전체 너비가 100 % + 200px입니다.

마지막으로 상자 크기 속성을 사용하여 너비 계산 방법을 일부 제어 할 수 있습니다.

출처

2014-10-14 22:27:50

CSS : 100 % 너비와 마진

답변

관련 문제