CSS에는 너비에 패딩이 포함되어 있습니까?

132

IE에서 너비가 패딩 크기를 포함하는 것으로 보입니다. FF에서는 너비가 변하지 않습니다. 어떻게 둘 다 똑같이 동작하게 할 수 있습니까?CSS에는 너비에 패딩이 포함되어 있습니까?

감사합니다.

출처

2011-01-15 Jake

. 그러나 일부 코드를 보지 않고도 그 이상의 지침을 줄 수는 없습니다. –

283

에 비슷한 것을 사용합니다. 이 모델에서 요소의 너비에는 채우기와 테두리가 포함됩니다. 예 :
#foo { width: 10em; padding: 2em; border: 1em; }
은 10em입니다.
대조적으로 표준을 두려워하는 브라우저는 모두 "콘텐츠 상자" 상자 모델로 기본 설정됩니다. 이 모델에서 요소의 너비는 이 아니며은 패딩이나 테두리를 포함합니다. 예를 들어 각각의 에지에 대한 각면 10em + 2em 패딩 + 1em 테두리 :
#foo { width: 10em; padding: 2em; border: 1em; }
실제로 16em 넓은 것이다.

당신이 valid markup와 IE의 현대 버전을 사용하는 경우

하는 good doctype 및 appropriate headers이 표준을 준수합니다. 그렇지 않으면, 당신은을 통해 "경계 상자"를 사용하는 현대적인 표준을 준수하는 브라우저를 강제 할 수

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

첫 번째 선언이 오페라에 필요한, 두 번째는 세 번째는 웹킷과 크롬을위한, 파이어 폭스입니다. 웹킷 (사파리와 크롬) 어떤 선언을 통해 padding-box 박스 모델을 지원하지 않는 http://phrogz.net/CSS/boxsizing.html

참고 :

는 여기에 귀하의 브라우저가 지원하는 박스 크기 선언 테스트를 위해 년 전에 만든 간단한 테스트입니다.

출처

2011-01-15 04:59:55 Phrogz

+1 콘텐츠 상자 및 테두리 상자 모델을 모두 언급했습니다. 차이점에 대해 자세히 설명하고 싶을 수도 있습니다. – BoltClock

@BoltClock 더 엄격한 답변을 주셔서 감사합니다. 업데이트 됨. – Phrogz

좋은 답변; 나는 지금 2,3 일 동안 다른 옵션의 이름을 기억하려고 노력했다. (+1 =) –

간단한 규칙은 동일한 요소에 패딩/여백 및 너비 속성 사용을 피하려고하는 것입니다. 즉 IE가 더-편리-하지만, 비 - 표준 "국경 박스" 박스 모델을 사용하는 데 사용이

<div class="width-div"> 
    <div class="padding-div"> 
    ........... 
    ........... 
    </div> 
</div>

출처

2011-01-15 04:59:44 shankhan

나는이 방법을 정기적으로 사용하며 브라우저와 관련하여 크로스 브라우저 문제가 발생하지 않습니다. –

Doctype을 선언 했습니까? html 코딩을 시작했을 때 나는이 문제를 겪었고 doctype을 선언하지 않은 것이 었습니다. 내가 제일 좋아하는 것입니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
... 
</html>

출처

2011-01-15 15:28:23 tybro0103

나는이 질문에 충돌하고 오래된 몇 년은, 비록 내가이 경우에 사람이 스레드에 범프 추가 할 수 있습니다 생각했다.

이제 CSS3에는 상자 크기 조정 속성이 있습니다. 를 설정하면,

.bigbox { 
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333; 
    padding: 10px; 
}

클래스 폭 1000px 대신 1030px 될 것이다,라고. 이것은 물론 액체 div와 함께 픽셀 크기의 경계를 사용하는 사람에게는 그렇지 않은 문제를 해결하기 때문에 매우 유용합니다.

IE7 이하를 제외한 모든 주요 브라우저에서 상자 크기가 지원됩니다.에는 너비 또는 높이 치수 내의 모든 항목이이고 테두리 상자에는 상자 크기를 설정하십시오. 다른 항목을 너비 및/또는 높이 (기본값)로 설정하려면 상자 크기를 "content-box"로 설정할 수 있습니다.

나는 브라우저 구문의 현재 상태 모르겠지만, 난 여전히 -moz 및 -webkit 접두사를 포함

당신은 아마 표준 호환 모드를 활성화해야합니다

.bigbox{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

출처

2014-02-10 17:36:09

예, Paul Irish는 여기에 대한 멋진 블로그 기사를 가지고 있습니다 : http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –

CSS에는 너비에 패딩이 포함되어 있습니까?

답변

관련 문제