div 사이의 공간-테이블 셀 표시

Question 1

여기에 두 개의 div가 있습니다.

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

이 두 div 사이에 공간을 만드는 방법이 display:table-cell있습니까?

Question 2

border-spacing속성 을 사용할 수 있습니다 .

HTML :

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS :

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin 데모

다른 옵션이 있습니까?

글쎄 ,별로.

왜?

margin속성 은display: table-cell 요소에 적용 할 수 없습니다 .
padding 속성은 셀의 가장자리 사이에 공간을 만들지 않습니다.
float속성 table-cell은 부모 요소만큼 높을 수있는 요소 의 예상되는 동작을 파괴합니다 .

Question 3

가능하면 투명한 테두리를 사용하십시오.

JSFiddle 데모

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

설명

border-spacing수락 된 답변에서 알 수 있듯이 속성을 사용할 수 있지만 이것은 테이블 셀 사이뿐만 아니라 테이블 셀과 테이블 컨테이너 사이에도 공간을 생성합니다. 이것은 원치 않는 것일 수 있습니다.

표 셀에 눈에 띄는 테두리가 필요하지 않은 경우 transparent테두리를 사용 하여 셀 여백을 생성 해야 합니다. 투명 테두리는 설정이 필요합니다. background-clip: padding-box;그렇지 않으면 테이블 셀의 배경색이 테두리에 표시되기 때문입니다.

투명 테두리 및 배경 클립은 IE9 이상 (및 기타 모든 최신 브라우저)에서 지원됩니다. IE8 호환성이 필요하거나 실제 투명 공간이 필요하지 않은 경우 흰색 테두리 색상을 설정하고 제외 할 수 있습니다 background-clip.

Question 4

<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

Question 5

글쎄, 위의 내용이 작동합니다. 여기에 마크 업이 약간 덜 필요하고 더 유연한 솔루션이 있습니다.

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}

<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>

스 니펫 확장

Question 6

이름이 무엇이든간에 새 div를 만들고 (테이블 분할을 사용합니다) 콘텐츠를 추가하지 않고 너비를 지정하고 분리해야하는 필요한 div 사이에 배치합니다.

필요한 너비를 추가 할 수 있습니다. 0.6 %를 사용했습니다. 왜냐하면 이것을해야 할 때 필요했기 때문입니다.

.table-split {
  display: table-cell;
  width: 0.6%
}

<div class="table-split"></div>