같은 요소에 너비와 안쪽 여백을 사용하지 않으시겠습니까?

Question

많은 사람들이 CSS를 사용하여 동일한 요소에 너비와 채우기 또는 여백을 사용하지 말아야한다고 언급했습니다. 왜 그런가요?

Answer 1

일부 브라우저는 너비를 패딩과 여백을 포함하여 요소의 전체 너비로 처리하므로 일부는 너비를 채우기 및 여백이 추가되는 기본 너비로 취급합니다. 결과적으로 귀하의 디자인은 다른 브라우저에서 다르게 보일 것입니다.

자세한 내용은 W3C page on Box Model 및 quirksmode's take을 참조하십시오.

Answer 2

폭, 패딩 및/또는 여백을 함께 사용하여 발생하는 문제에 대해 본 적이 없습니다.

유효한 DOCTYPE이 있고 Quirks 모드가 아닌 한 예측 가능한 상자 모델을 가지므로 작업하려는 것을 나타 내기 위해 여백/패딩 중에서 가장 적절한 것을 사용해야합니다.

참고 : 여백은 테두리 외부에 적용되며 여백은 테두리 안에 적용됩니다. 너비는 컨테이너의 내부 너비를 의미합니다. 총 너비 = 여백 + 테두리 + 패딩 + 너비 (처음 세 개가 왼쪽과 오른쪽 모두에 추가됨을 기억하십시오).

Answer 3

당신은 너비 값이 할당 된 DOM 요소와 패딩 및/또는 여백 값이 공존해서는 안된다는 말을하고 있습니까? 그렇다면 IE뿐만 아니라 웹 표준 (예 : Firefox)을 구현하는 브라우저와 호환되는 CSS를 작성하고 싶지 않은 경우에만 해당됩니다. 여백이나 패딩 값을 사용하지 않고 일반적으로 찾고있는 레이아웃을 얻는 것은 어려울 것입니다. 하지만 두 브라우저 모두에서 호환되는 CSS를 작성하는 것이 좋습니다. 이것이 당신이 요구하는 것이 아니라면, 나를 바로 잡아주세요.

Answer 4

이유는 유명한 box model problem 일 수 있습니다.

요약 : 패딩과 여백을 너비 또는 높이와 함께 사용하는 경우 IE는 너비가과 다르며 표준 렌더링을 렌더링합니다. 나는이 이유

Answer 5

을 생각할 수 있습니다 : 당신이 스타일 {폭 요소가있을 때 IE의

1) 기존의 "상자 모델"그래서, 정말 색다른입니다 : 300 픽셀을; 패딩 : 30px; margin : 20px;} 외곽선은 예상 된 400px (300px 크기와 2x 30px 패딩, 2x20px margin)와 실제로 일치하지 않을 수도 있습니다. 실제 너비가 340 인 것으로 생각합니다. 너비 계산에 패딩이 롤링됩니다. .에있다 제공

...

2) 어떤 사람들은 조금 혼란 계산을 찾을 수 있습니다.

그건 그렇고, 나는 개인적으로 여백과 여백과 함께 너비를 사용하고 그것에 문제가 없다고 말했습니다. 패딩/여백을 사용할 때 너비를 사용하지 않도록 자신을 제한하면 비 의미 론적 괴롭힘이 많은 코드를 사용하고 있음을 의미합니다. 그것은 다양한 브라우저가 요소로 무엇을 할 것인지를 알아야한다는 것을 의미하지만, 이것이 우리가 browsertest하는 이유입니다.

Answer 6

많은 사람들이 여전히 IE의 결함있는 상자 모델에 대한 개념에 집착하고 요소 너비, 패딩 및 여백으로 어지럽게 시작하면 문제가 생길 수 있다고 생각합니다.

꽤 오래된 조언입니다. 당신이 a correct doctype을 사용한다고 가정하면, 모든 최신 브라우저 (IE6 이상 포함)는 동일한 상자 모델로 작동하므로 실제로는 너무 많은 문제가 있어서는 안됩니다.

이것은 CSS이기 때문에 분명히 브라우저 간 문제로는 입니다.하지만 악명 높은 IE 상자 모델은 과거의 일이되었습니다.

Answer 7

주목할 점 중 하나는 퍼센티지 너비를 거의 사용할 수 없다는 것입니다. 준수 브라우저를

#content { 
    width: 100%; 
    padding: 0 10px; 
} 

에서 작동 (분별,하지만 잘못된) IE 모델,하지만 표준에 : 당신이 당신의 "콘텐츠"사업부가 전체 폭을하려는 경우, 예를 들어이 걸릴하지만 10px 패딩이 div는 100 % + 20px의 너비를 차지하므로 좋지 않습니다. 해결책은 다른 "내부"컨테이너를 사용하는 것입니다.

<div id="content"> 
    <div class="inner"> 
     content here. 
    </div> 
</div> 

#content { 
    width: 100%; 
} 
#content .inner { 
    padding: 0 10px; 
} 

추가 마크 업이 약간 짜증나지만 장기적으로는 많은 것을 쉽게 만듭니다.