% 너비 div의 고정 된 px 패딩

패딩 CSS 스타일은 DIV의 하나 이상의면에 약간의 패딩을 추가합니다. 그러나 기존 공간을 차지하는 대신 전체 너비/높이에 추가됩니다.% 너비 div의 고정 된 px 패딩

제 문제는 % 너비의 DIV가 있지만 px로 측정 한 패딩이 필요하다는 것입니다. 총 너비는 매우 특수하게 유지되어야합니다. 융통성을위한 여지가 없습니다.

패딩과 너비가 모두 % 또는 PX 일 필요가 있으면 너비가 너비에서 총 패딩을 빼는 것만 큼 문제가되지 않습니다.

이 경우 어떻게해야합니까?

(패딩 PX가 5 가지 화면 크기로 반응하는 디자인을 갖고 있기 때문에 패딩 PX가 %로 표시 될 수 없다는 점을 유의하십시오. 일부 경우에는 브라우저가 동일한 너비 내에서 크기가 조정됨에 따라 DIV가 축소 될 수 있습니다. 범위)

출처

2014-01-14 Sam Coppock

box-sizing CSS 속성은 원하는 것을 수행해야합니다. 모든 브라우저에서 작동하려면 공급 업체 접두어가 필요합니다. 기본값은 content-box이며 미리 정의 된 희미한 값과 모든 오프셋 (예 : 패딩)을 추가하여 전체 상자 모델 치수를 계산하지만 border-box을 사용하면 정의 된 치수를 넘겨 줄 수 있어야합니다. http://www.paulirish.com/2012/box-sizing-border-box-ftw/

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

여기에 큰 문서입니다 :이 코드는 더 좋아할 전체 DOM,에 border-box 스타일을 적용합니다

출처

2014-01-14 18:00:31

% 너비 div의 고정 된 px 패딩

답변

관련 문제