내 문제를 설명하기 위해 이미지를 여기 DIV

의 크기 패딩입니다 포함 :내 문제를 설명하기 위해 이미지를 여기 DIV

나는 width: 50%;이 완료되면에서 고려되는 패딩이 필요합니다. 그렇지 않은 경우 첫 번째 div의 너비는 실제로는 패딩이 고려되지 않았기 때문에 50% + 2em이됩니다.

너비 계산에서 패딩을 계산하려면 어떻게해야합니까? 아니면 두 개의 동일한 크기이지만 패딩 된 div을 사용하는 것에 대한 해결 방법이 있습니까?

바이올린 :

div {box-sizing: border-box;}

Demo

: 당신은 상자 모델의 기본 동작을 변경 box-sizing 속성을 사용할 수 있습니다

<div style="padding:1em;float:left;width:50%;background-color:#faa"> 
    This div has 50% width, 1em padding, float left 
</div> 
<div style="background-color:#0f0;padding:1em"> 
    This is a div with 1em padding 
</div> 

<hr> 

<div style="float:left;width:50%;background-color:#faa"> 
    This div has 50% width and float left 
</div> 
<div style="background-color:#0f0"> 
    This is a normal div 
</div>

출처

2013-03-19 Doorknob