.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
или есть ли лучшая стратегия?
См. стандарт CSS 2.1, раздел 17.5.3. При использовании дисплея:table-row
высота DIV определяется только высотой элементов ячейки таблицы-ячейки
в ней. Таким образом, поле, набивка и высота на этих элементах не оказывают никакого влияния.
Пытались ли вы установить нижнее поле на .row div
, т.е. на ваши "ячейки"?
Когда вы работаете с реальными таблицами HTML, вы не можете устанавливать поля также и для строк - только для ячеек.
Ближайшее, что я видел, это установку промежутка времени между границами: 0 30px;
к контейнерному div. Однако, это просто оставляет мне место на верхнем краю таблицы, что противоречит цели, так как вы хотели margin-bottom.