내 CSS의 여백이 적용되지 않는 이유는 무엇입니까?

Question

나는 매일 작은 마진으로 구분 된 상자를 가지고 달력을 만들려고한다. 문제 : 여백이 적용되지 않습니다. 날짜 주위에 빨간색 테두리를 추가했으며 the code에서 볼 수 있듯이 테두리 사이에는 여백이 없습니다. 나는 불필요한 CSS를 모두 제거하고 심지어는 !important 속성을 추가했습니다 (나는 싫어합니다. 필자는 얼마나 절망적인지 알 수 없음). 나는 내가 뭘 잘못하고 있는지 절대적으로 볼 수 없으므로 어떤 도움을 주시면 감사하겠습니다.

코드는 here입니다.

편집 나는 hrunting의 대답 my code에

#calendar table { 
    border-collapse: separate; 
    border-spacing: 2px 2px; 
} 

에 언급 된 코드를 추가하지만, 어떤 변화를하지 않는 것. (빨간색 테두리를 제거 했으므로 날짜에 대해 별도의 상자가있는 경우 작동하는지 확인해야합니다.)

Answer 1

this StackOverflow answer here을 읽으십시오.

기본적으로 내부 테이블 요소에는 여백이 적용되지 않습니다. 테두리가 안에 있고 테두리가 외부가 아니라이되기 때문에 원하는 패딩이 아닙니다. 원하는 모양을 얻으려면 border-spacing attribute along with the border-collapse attribute을 사용해야합니다.

또한 <table> 정의에서 cellspacing=0 HTML 특성을 제거하십시오.

Answer 2

표 셀에는 여백을 직접 적용 할 수 없습니다. 여기 테이블의 사양을 읽을 수 있습니다 : http://www.w3.org/TR/CSS2/tables.html 및 표 셀에 자체 상자 모델이 있습니다. @Praveen과 같은 패딩을 추가 할 수 있지만 패딩에는 제한이 있습니다. 예를 들어 경계선 밖에서 작업 할 수없는 공간을 늘리려는 경우입니다. 패딩은 실제로 셀 내의 공간을 증가 시키므로 다른 효과를냅니다. 이 질문의

가능한 중복 : 그 질문에서 CSS Cell Margin

을 촬영 :

후 "오른쪽"방법은 무엇입니까? 표의 cellspacing 속성을 바꾸려면 border-spacing ( 국경 붕괴가 비활성화 됨)을 대체하십시오. 그러나 셀 당 "여백"이 필요하면 정확히 어떻게 을 CSS를 사용하여 얻을 수 있는지 잘 모르겠습니다. 내가 생각할 수있는 유일한 해킹은 위의 으로 패딩을 사용하고 셀 (배경색, 테두리, 등)의 스타일을 피하고 셀 내부의 컨테이너 DIV를 사용하여 스타일을 구현하는 것입니다.