23/23 финальное испытание, 100% - какие замечания ?

Курсы §10. Блочная модель документа
1

Завершил на 100% но хотелось бы получить комментарии профи.

код:

.column {
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-table;
width: 76px;
}
.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
}

.table{margin-top: 10px;
border-collapse:collapse;
}
.row{display:table-row
}
.col-3{display: none;
}
.col-2, .col-1{width:96px;}

1 лайк
2

Почему не inline-block?

3

Методом проб и ошибок. о блоке не подумал даже, чем чревато использование display: inline-table; ?

Как я понимаю так на одну строку кода меньше, не надо выравнивать блок по вертикали.

4

Ничем не чревато. Всё правильно. Хотелось узнать, насколько вы понимаете то, что делаете.

1 лайк
6

Почему не задать это в общий класс .cell ?

7

Вот мои 100%
Использовал border-box чтобы не высчитывать ширину блока с учетом отступов, а ориентироваться по клеточкам.

/* Cтили, которые можно изменять */
.column {
margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
box-sizing: border-box;
width: 100px;
margin-right: 10px;
vertical-align: top;
}

.table {
display: table;
border-collapse: collapse;
}

.row {
display: table-row;
}

.cell {
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: table-cell;
}

.col-3 {
display: none;
}

.col-1, .col-2 {
box-sizing: border-box;
width: 118px;
}