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

"display: table-cell;"

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

원인

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

솔루션

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

HTML

<div><pre class="brush:php;toolbar:false"><div>
<p>&l t;/div><br></p>
<p></p>
<p><strong>CSS</strong></p>
<p></p>
<pre class="brush:php;toolbar:false">.row {display:table-row;}<br>.cell {display:table-cell;padding:5px;border:1px solid black;}<br>

이 설정을 사용하면 div 요소 사이에 간격을 추가할 수 있습니다.

가로 및 세로 여백 변형

또한 border-spacing 속성은 두 개의 고유한 값을 지정하여 가로 및 세로 축을 따라 독립적인 여백 값을 허용합니다.

.../border-spacing:3px 5px;} /<em> 가로 3px, 세로 5px </em>/<br>