Bố cục bảng CSS: tại sao table-row không chấp nhận lề?

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: table-row;
  margin-bottom: 30px;
  /* HERE */
}
.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}
.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3"></div>
    <div class="home_4"></div>
  </div>

  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
  </div>
</div>

Câu hỏi của tôi liên quan đến dòng được đánh dấu HEREtrong CSS. Tôi phát hiện ra rằng các hàng quá gần nhau, vì vậy tôi đã cố gắng thêm một lề dưới để phân tách chúng. Thật không may, nó không hoạt động. Tôi phải thêm lề vào các ô trong bảng để tách các hàng.

Lý do đằng sau hành vi này là gì?

Ngoài ra, bạn có thể sử dụng chiến lược này để thực hiện bố cục như tôi đang làm không:

[icon] - text      [icon] - text
[icon] - text      [icon] - text

hoặc là có một chiến lược tốt hơn?

Xem tiêu chuẩn CSS 2.1, mục 17.5.3. Khi bạn sử dụng display:table-row, chiều cao của DIV chỉ được xác định bởi chiều cao của các table-cellphần tử trong đó. Do đó, lề, khoảng đệm và chiều cao trên các phần tử đó không có tác dụng.

http://www.w3.org/TR/CSS2/tables.html

Làm thế nào đây là một công việc xung quanh (sử dụng một bảng thực tế)?

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

Nó không năng động như vậy, vì bạn phải thiết lập rõ ràng màu sắc của đường viền (trừ khi cũng có cách xung quanh điều đó), nhưng đây là điều tôi đang thử nghiệm trên một dự án của riêng mình.

Chỉnh sửa để bao gồm các nhận xét về transparent:

tr.row {
    border-bottom: 30px solid transparent;
}

Điều gần nhất mà tôi đã thấy là đặt thành border-spacing: 0 30px;div container. Tuy nhiên, điều này chỉ để lại cho tôi khoảng trống ở mép trên của bảng, điều này làm mất đi mục đích, vì bạn muốn margin-bottom.

Bạn đã thử đặt lề dưới thành .row div, tức là cho "ô" của bạn chưa? Khi bạn làm việc với các bảng HTML thực tế, bạn cũng không thể đặt lề cho các hàng - chỉ cho các ô.

Có một cách khắc phục khá đơn giản cho vấn đề này, các thuộc tính border-spacingvà border-collapseCSS sẽ hoạt động display: table.

Bạn có thể sử dụng phần sau để lấy phần đệm / lề trong ô của mình.

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 15px;
}

.row {
  display: table-row;
}

.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
    <div class="home_3">Foo</div>
    <div class="home_4">Foo</div>
  </div>

  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
  </div>
</div>

Lưu ý rằng bạn phải có

border-collapse: separate;

Nếu không nó sẽ không hoạt động.

Vĩ cầm

 .row-seperator{
   border-top: solid transparent 50px;
 }

<table>
   <tr><td>Section 1</td></tr>
   <tr><td>row1 1</td></tr>
   <tr><td>row1 2</td></tr>
   <tr>
      <td class="row-seperator">Section 2</td>
   </tr>
   <tr><td>row2 1</td></tr>
   <tr><td>row2 2</td></tr>
</table>


#Outline
Section 1
row1 1
row1 2


Section 2
row2 1
row2 2

đây có thể là một giải pháp khác

Thêm khoảng cách giữa hai phần tử, sau đó làm cho nó không hiển thị:

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

Hoạt động - Thêm khoảng cách vào bảng

#options table {
  border-spacing: 8px;
}

thêm một thẻ br giữa các div đã hoạt động. thêm thẻ br giữa hai div được hiển thị: table-row trong cha mẹ với display: table