`display: table-cell;`이 있는 Div에서 여백이 작동하지 않는 이유와 간격을 어떻게 추가할 수 있나요?

"display: table-cell;"

HTML에서 다음과 같은 시나리오를 접할 수 있습니다. "display: table-cell;"이 포함된 div 요소 여백 속성에 의해 도입된 예상 간격이 부족합니다.

원인

여백 속성은 테이블 캡션, 표 또는 표 이외의 표시 유형을 나타내는 요소와 호환되지 않습니다. 인라인 테이블. 안타깝게도 display: table-cell은 이러한 예외에 해당하지 않습니다.

솔루션

이 제한을 피하려면 border-spacing 속성을 대안으로 활용하는 것이 좋습니다. 그러나 테두리 축소와 함께 디스플레이: 테이블 레이아웃을 특징으로 하는 상위 요소에 테두리 간격을 적용하는 것이 중요합니다. 별도입니다.

HTML

<div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>