'display: table-cell' 요소에서 여백이 작동하지 않는 이유는 무엇입니까?

여백에 영향을 받지 않는 요소

문제

디스플레이 형식의 인접 div : 테이블 셀; 5px 값으로 설정된 경우에도 여백 속성의 영향을 받지 않습니다.

설명

MDN 문서에 따르면 여백 속성은 요소에 적용되지 않습니다. table-caption, table 및 inline-table을 제외한 테이블 표시 유형이 있습니다. 결과적으로, display:table-cell이 있는 요소에는 영향을 미칠 수 없습니다.

솔루션

이러한 요소 사이의 간격을 확보하려면 border-spacing 속성을 사용하세요. 그러나 이를 위해서는 상위 요소에 display:table 및 border-collapse:separate를 적용해야 합니다.

예:

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

.table {
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    padding: 5px;
    border: 1px solid black;
}

border-spacing 속성을 사용하고 border-collapse 및 디스플레이 설정을 사용하면 디스플레이 스타일이 지정된 div 요소 사이에 여백을 효과적으로 만들 수 있습니다. table-cell;.

고급 기능

Diego Quirós가 언급한 것처럼 border-spacing 속성을 사용하면 가로 및 세로 축에 대해 서로 다른 여백 값을 정의할 수 있습니다. . 예:

.table {
    /* ... */
    border-spacing: 3px 5px; /* 3px horizontally, 5px vertically */
}

위 내용은 'display: table-cell' 요소에서 여백이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!