HTML 요소에 패딩 추가하기 - IE, FF, Chrome 등

Question

나는 의심 스럽습니다. 우리는 너비가 200px 인 div를 고려해야합니다. 다음 스타일을 추가하면

style="padding-left:10px; padding-right:10px" 

요소에 실제로 어떻게됩니까? div의 총 너비가 왼쪽에서 10px (왼쪽 패딩의 경우), 원래의 폭이 중간에서 200px, 오른쪽에서 10px (오른쪽 패딩의 경우)로 220px로 증가합니까?

200px에서 패딩 공간이 필요하며 (10px + 180px + 10px)가됩니까?

위의 렌더링은 브라우저마다 다릅니다 (특히 IE와 FF)?

업데이트

<div style="width:180x">  
<div style="width: 180px;background-color: #4E81BD;text-align: left;padding-left: 5px;padding-right: 5px;"> 
    <a class="anchor-tag" href="Javascript:;"><span style="font-family: Calibri,Tahoma,Verdana;font-weight: 500; color: white">Rasu</span></a> 
</div> 
<div style="width: 180px;height: 270px;border: 1px solid #4E81BD;padding: 5px;overflow-y: auto;overflow-x: hidden;"> 
    <div style="border: 1px solid #DADADA;height: 150px;overflow-x: hidden;overflow-y: auto;text-align: left;font-family: Calibri;"> 
    </div> 
    <div style="height: 10px;"> 
    </div> 
    <div style="height: 75px;border: 1px solid #DADADA;"> 
     <textarea>[Type your message here]</textarea> 
    </div> 
</div> 
</div> 

는

NLV

Answer 1

모든 최신 브라우저가 W3C 박스 모델을 준수합니다. 자세한 내용은 here을 참조하십시오. 여기 상자의 전체 크기를 산출하는 방법을 설명하는 도면이다 :

본질적으로 상자의 치수 width padding + + border이다. 여백은 상자의 위치에 영향을 줄 수 있지만 여백에 추가되지 않습니다.

필립은 깨진 상자 모델이있는 IE5에 대해 정확합니다. 당신은 박스 모델의 작동 방식을 변경하려는 경우이 단계에서 당신은 또한 다른 브라우저 모두 선택할 수 있도록 -webkit-box-sizing, -ms-box-sizing 및 -moz-box-sizing을 사용해야하지만

, 당신은 box-sizing CSS3 속성을 사용할 수 있습니다 값을 올리십시오. 여기

자세한 내용 : http://www.quirksmode.org/css/box.html

Answer 2

그것은 220px 넓은 될 것입니다 감사합니다.

IE5 또는 IE6 (단조 모드)에서는 10px + 180px + 10px가되지만 걱정하지 않아도됩니다.

전체 이야기

는 여기에서 찾을 수 있습니다 : http://www.quirksmode.org/css/box.html