`display: table-cell;`이 있는 div에서 여백이 작동하지 않는 이유는 무엇입니까?

"display: table-cell;"로 div를 할 수 없는 이유 여백을 적용하시겠습니까?

HTML에서 div는 "디스플레이"와 같은 CSS 레이아웃 설정을 사용하여 정렬할 수 있는 인접 요소입니다. "display: table-cell;"을 할당하면 이러한 div는 테이블 내의 셀처럼 동작하고 특정 속성을 상속합니다. 그러한 속성 중 하나는 여백 속성의 비효율성입니다.

원인: "display: table-cell;"

MDN 문서에 따르면 여백은 테이블 표시 유형의 요소에 적용할 수 없습니다. "table-caption", "table" 및 "inline-table" 이외의 것. "디스플레이: 테이블 셀;" 이 예외에 해당하면 여백과 호환되지 않습니다.

해결 방법: Border-Spacing 속성

여백을 사용하는 대신 테두리 간격을 적용하여 div 사이의 간격을 확보하는 것이 좋습니다. 그러나 이 속성은 "display: table" 레이아웃과 "border-collapse:"가 있는 상위 요소에 적용되어야 합니다. 별도".

예:

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;
}

보기 jsFiddle 데모

가로 및 세로 축의 여백 변화

Diego Quieros가 언급한 것처럼 border-spacing은 가로 및 세로 축에 서로 다른 여백을 생성하는 두 가지 값을 지원합니다.

예:

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

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