테이블 셀 요소에서 여백이 작동하지 않는 이유는 무엇입니까?

Table-Cell 요소에서 여백이 실패하는 이유는 무엇입니까?

display: table-cell을 사용하여 인접한 div 요소에 여백: 5픽셀을 할당했지만 여백이 나타나지 않습니다. 이유가 무엇인가요?

원인 이해

MDN 문서에 따르면 margin 속성은 table-caption, table, inline-table을 제외한 테이블 표시 유형의 요소를 제외합니다. 따라서 디스플레이: table-cell이 있는 요소에서는 여백이 효과적이지 않습니다.

문제 해결

여백을 사용하는 대신 테두리 간격 속성을 사용하는 것이 좋습니다. 이 속성은 디스플레이: 테이블 레이아웃 및 테두리 축소: 분리가 있는 상위 요소에 적용됩니다.

예제 코드

HTML

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

CSS

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

여백 사용자 정의 값

테두리 간격 속성은 두 가지 값을 사용하여 서로 다른 가로 및 세로 여백을 허용합니다.

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

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