Сервировка CSS: почему строка таблицы не принимает поле?

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

Мой вопрос относительно отмеченной строки HERE в CSS. Я узнал, что строки также друг близко к другу, таким образом, я пытался добавить нижнее поле для разделения их. К сожалению, это не работает. Я должен добавить поля к ячейкам таблицы для разделения строк.

Какова причина позади этого поведения?

Кроме того, это хорошо для использования этой стратегии выполнить layouting, как я делаю:

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

или есть ли лучшая стратегия?

93
задан Sebastian Simon 8 February 2017 в 19:13
поделиться

3 ответа

См. стандарт CSS 2.1, раздел 17.5.3. При использовании дисплея:table-row высота DIV определяется только высотой элементов ячейки таблицы-ячейки в ней. Таким образом, поле, набивка и высота на этих элементах не оказывают никакого влияния.

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

81
ответ дан 24 November 2019 в 06:20
поделиться

Пытались ли вы установить нижнее поле на .row div, т.е. на ваши "ячейки"? Когда вы работаете с реальными таблицами HTML, вы не можете устанавливать поля также и для строк - только для ячеек.

6
ответ дан 24 November 2019 в 06:20
поделиться

Ближайшее, что я видел, это установку промежутка времени между границами: 0 30px; к контейнерному div. Однако, это просто оставляет мне место на верхнем краю таблицы, что противоречит цели, так как вы хотели margin-bottom.

16
ответ дан 24 November 2019 в 06:20
поделиться