CSS : 간단한 수학 위에 혼란

Question

I가 this page에서 다음 CSS :

#left { 
    display: table-cell; 
    float: left; 
    width: 20%; 
    padding: 2.5%; 
} 
#right { 
    display: table-cell; 
    float: right; 
    width: 75%; 
} 

I 2.5 + 20 + 250 + 75 = 100 그러나

가 큰 갭 사이가 있다고 판단 #left 및 #right. 왜 거기에 있습니까? 나는 #left과 #right이 모두 #main을 차지할 것이라고 생각했다.

또한 #footer을 어떻게 재설정합니까? #left 아래 줄은 어떻게됩니까?

감사합니다.

Answer 1

상자 크기를 사용하고 있기 때문에 : border-box; 재설정 CSS의 일부로. 그냥 코멘트/제거하고 다시 시도하십시오.

* { 
box-sizing: border-box; 
margin: 0; 
padding: 0; 

은} 또한 바닥 글의 문제를 해결하기위한 다음과 같은 구조를 사용하는 것이 좋습니다.

<div id="main"> 
<div id="wrap"> 
    <div id="left">Left</div> 
    <div id="right">Right</div> 
</div> 
<div id="footer">Footer</div></div> 

Answer 2

그것은 당신을 혼동하는 box-sizing 속성의 -이 오히려 브라우저는 일반적으로 어떻게 행동하는 요소를, 스트레칭보다 요소 내부의 공간을 사용하는 패딩됩니다. 그래서 상자 크기 조절 속성과 너비 : 20 %를 가짐으로써 브라우저는 여분의 2.5 %를 추가하지 않고 20 % 너비로이 요소를 그립니다.

너비를 25 %로하고 상자 크기를 유지하면 예상대로 동작합니다.

여기에 a good explanation of box-sizing by Paul Irish이 있습니다. 무슨 일이 일어나고 있는지 설명해야합니다 (및 another from CSS Tricks).

Answer 3

모든 요소에 '상자 크기 : 테두리 상자'가 있으므로 너비에 여백이 추가되지 않습니다. 이 here에 대해 읽어보십시오.

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}