Последнее испытание 23/23

Добился 100% результата в последнем испытании курса “Блочная модель документа”. Но осадок от того, что пришлось высчитывать ширину элементов остался. Уверен, что есть более простые и изящные способы решения задачки. Подскажите, как сделать проще.

/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

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

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

}
.row {
display: table-row;

}
.col-1 {
width: 96px;
}

.cell {
display: table-cell;
}
.col-3 {
display: none;
}

1 Симпатия
.column {
display: inline-block;
vertical-align: top;
width: 76px;
margin-bottom: 10px;
margin-right: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;

}
.table {
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 96px;
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.col-3 {
display: none;
}

Обьясните пожалуйста почему у класса column ширина 76px получилась. а у cell 98px?

А у вас 98px получилось? Покажите код свой.

`/* Базовые стили, изменять не нужно */

html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

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

}

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

.row {
display:table-row;
}

.col-3 {
visibility:hidden;
}

щирину не сам подбирал на форуме смотрел. просто не могу понять почему? и у меня внутри таблицы жирная граница получилась`

вроде все получилось только с таблицой что то непонятное.

Так 96px написано у вас. Откуда 98px взялось?
Двойные границы в таблице, потому что забыли border-collapse.

Я перепутал. А ПОЧЕМУ У КОЛУМН 76,?

А по-вашему сколько?

Как я понял потому что 1ый блок занимает 80 px + border с 2 сторон по 2 пикселя . то есть 80 - 2*2=76? Я правильно понял?

Да, правильно, рамка считается отдельно.

Спасибо огромное. Я просто все сделал а 100% не было . решил на форум взглянуть и смотрю ширина 76 почему? А теперь понял. Спасибо. Честно говоря самый лучший форум по моему мнению. Мне так сразу нигде не отвечали) Будьте здоровы. Досвиднаия!

Заходите ещё)

Спасибо)

сделал следующим образом, насколько это правильно без использования классов кол1 и кол2:

margin-bottom: 10px;
padding: 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
display: inline-block;
vertical-align: top;
width: 76px;
margin-right: 10px;

}

.cell {
display: table-cell;
padding: 5px 10px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
width: 96px;
}
.table {
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.col-3 {
display: none;

я правильно понимаю, что чем меньше, тем лучше?

В данном случае - да, чем меньше, тем лучше.
Только поправьте начало кода, первое правило не полностью отображается.

у меня выдало 100% правильности. Не могу понять, что не так отображается?
кстати, я в .table прописал display: table;
это неправильно?
Мне хотелось, чтобы с помощью ф12, когда наводишь на таблицу через селект она полностью отображалась как .table и я мог управлять всем стилем из тейбла, но у меня не получилось, почему?

Поставьте пустую строку между кодом и текстом самого сообщения.
Почему через инспектор вам не удалось управлять стилями таблицы, не знаю.

вы немного не поняли, смотрите:

прописав в .table - display: table;
я думал, что наводя селектом на таблицу из 2 моих столбцов (или как правильно сказать?) она вся будет отображаться как div.table и что можно будет управлять стилем таблицы прописывая все в .table.
Где я ошибся? Почему это не сработало? Должно ли было это вообще работать?
А, про какую пустую строку вы говорите?

Вот так ваше сообщение начинается. Чтобы начало кода было видно, нужно после [quote=“JohnnyJO, post:16, topic:4843”]
сделал следующим образом, насколько это правильно без использования классов кол1 и кол2:
[/quote]

с помощью клавиши Enter на клавиатуре сделать пустую строку.
Таблица полностью не отображается, потому что вы навели курсор на ячейку.