[css] CSS에 너비에 패딩이 포함됩니까?

Program / 글쓴이

IE에서 너비는 패딩 크기를 포함하는 것으로 보입니다. FF에서 너비는 그렇지 않습니다. 두 가지를 어떻게 동일하게 만들 수 있습니까?

감사.

답변

  • IE는보다 편리하지만 비표준적인 “테두리 박스” 박스 모델을 사용했습니다. 이 모델에서 요소의 너비에는 패딩과 테두리가 포함됩니다. 예를 들면 다음과 같습니다
    #foo { width: 10em; padding: 2em; border: 1em; }
    것 10em넓은.

  • 반대로 모든 표준을 두려워하는 브라우저는 기본적으로 “컨텐츠 상자” 상자 모델로 설정됩니다. 이 모델에서 요소의 너비 에는 패딩 또는 테두리가 포함 되지 않습니다 . 예를 들어,
    #foo { width: 10em; padding: 2em; border: 1em; }
    실제로는 16em넓습니다. 10em+ 2em각 측면에 패딩, + 1em각 가장자리에 대한 경계.

유효한 markup , 좋은 doctype 및 적절한 헤더 와 함께 최신 버전의 IE를 사용하는 경우 표준을 준수합니다. 그렇지 않으면 최신 표준 호환 브라우저가 다음을 통해 “테두리 상자”를 사용하도록 할 수 있습니다.

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

첫 번째 선언은 Opera, 두 번째는 Firefox, 세 번째는 Webkit 및 Chrome입니다.

다음은 브라우저에서 지원하는 상자 크기 선언을 테스트하기 위해 몇 년 전에 한 간단한 테스트입니다. http://phrogz.net/CSS/boxsizing.html

Webkit (Safari 및 Chrome)은 padding-box선언을 통해 상자 모델을 지원하지 않습니다 .

답변

간단한 규칙은 동일한 요소에 패딩 / 여백 및 너비 속성을 사용하지 않는 것입니다. 즉 이와 비슷한 것을 사용하십시오

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

답변

나는이 질문에 부딪 쳤으며 몇 살이되었지만 누군가이 스레드에 부딪 칠 경우 이것을 추가 할 수 있다고 생각했습니다.

CSS3에는 상자 크기 속성이 있습니다. 설정하면 다음과 같이 말합니다.

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

수업의 너비는 1030px가 아니라 1000px입니다. 물론 이것은 액체 div와 함께 픽셀 크기의 테두리를 사용하는 모든 사람에게 믿을 수 없을만큼 유용합니다. 왜냐하면 그것은 불용성 문제를 해결하기 때문입니다.

또한 상자 크기 조정은 IE7 이하를 제외한 모든 주요 브라우저에서 지원됩니다. 너비 또는 높이 치수 내에 모든 항목 을 포함 시키려면 상자 크기를 경계 상자로 설정하십시오. 다른 항목을 너비 및 / 또는 높이 (기본값)로 집계 하려면 상자 크기를 “content-box”로 설정할 수 있습니다.

브라우저 구문의 현재 상태를 잘 모르겠지만 여전히 -moz 및 -webkit 접두사를 포함합니다.

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

답변

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>

답변

여전히 문제가있는 것이다 사람들을 위해, jQuery를이 두 가지 속성을 제공 outerWidth ()하고 innerWitdh ()알고하는 폭 또는 국경없는 객체의를 …

답변