khoảng cách giữa các div - hiển thị bảng-ô

Tôi có ở đây hai div:

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

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

Có cách nào để tạo khoảng trống giữa hai div này (có display:table-cell) không?

Bạn có thể sử dụng thuộc border-spacingtính:

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 Demo

Có lựa chọn nào khác không?

Chà , không hẳn.

Tại sao?

• marginthuộc tính không áp dụng cho display: table-cellcác phần tử.
• padding thuộc tính không tạo khoảng trống giữa các cạnh của ô.
• floatthuộc tính phá hủy hành vi mong đợi của table-cellcác phần tử có thể cao bằng phần tử mẹ của chúng.

Sử dụng đường viền trong suốt nếu có thể.

JSFiddle Demo

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

Giải trình

Bạn có thể sử dụng thuộc border-spacingtính, như câu trả lời được chấp nhận gợi ý, nhưng điều này không chỉ tạo ra khoảng trống giữa các ô trong bảng mà còn giữa các ô trong bảng và vùng chứa bảng. Điều này có thể không mong muốn.

Do đó, nếu bạn không cần các đường viền hiển thị trên các ô trong bảng của mình, bạn nên sử dụng các transparentđường viền để tạo lề cho ô. Các đường viền trong suốt yêu cầu thiết lập background-clip: padding-box;vì nếu không, màu nền của các ô trong bảng được hiển thị trên đường viền.

Đường viền trong suốt và clip nền được hỗ trợ trong IE9 trở lên (và tất cả các trình duyệt hiện đại khác). Nếu bạn cần khả năng tương thích với IE8 hoặc không cần không gian trong suốt thực tế, bạn có thể chỉ cần đặt màu đường viền trắng và bỏ background-clipđi.

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

Chà, cách trên hoạt động, đây là giải pháp của tôi yêu cầu ít đánh dấu hơn một chút và linh hoạt hơn.

.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>

Tạo một div mới với bất kỳ tên nào (tôi sẽ chỉ sử dụng table-split) và cung cấp cho nó chiều rộng, không thêm nội dung vào nó, trong khi đặt nó giữa các div cần thiết cần được phân tách.

Bạn có thể thêm bất kỳ chiều rộng nào bạn thấy cần thiết. Tôi chỉ sử dụng 0,6% vì đó là thứ tôi cần khi phải làm việc này.

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

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