.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>
Minha dúvida é em relação à linha marcada HERE
no CSS. Descobri que as linhas estão muito próximas umas das outras, então tentei adicionar uma margem inferior para separá-las. Infelizmente isso não funciona. Tenho que adicionar as margens às células da tabela para separar as linhas.
Qual é a razão por trás desse comportamento?
Além disso, não há problema em usar essa estratégia para fazer o layout como estou fazendo:
[icon] - text [icon] - text
[icon] - text [icon] - text
ou existe uma estratégia melhor?