Первое испытание [8/23] 100% (Оцените код пожалуйста)

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

Вот код, куда я ненужные паддинги засовываю?

мне казалось, что задание состоит в том, чтобы максимально коротким кодом добиться 100%совпадения, использовав при этом все пройденные материалы, я, вроде, все это сделал?

23

при 100% выполнении получается 186px
.block1 {
width: 196px;
height: 36px;
margin-bottom: 20px;
}

где 186px то? чет либо я не экстрасенс, либо лыжи не едут. маржин лишний, он схлопывается.

мне казалось, что задание состоит в том, чтобы максимально коротким кодом добиться …

  • кто вас обманул, что у вас максимально короткий код?
  • если эти блоки будут во флексах, то как будет дальше с кодом?
  • а если отображение на мобильных устройствах, где неявная ширина полотна будет с отступами?
  • если второй блок убрать, верстка вся полетит, верно?
  • почему тогда первый блок с помощью высоты и ширины задали, давайте делайте все отступами. только задание в том, чтобы использовать все эти приемы.

Делайте как хотите, вы так не научитесь, если саму суть не видите. по сути у вас нет блоков, у вас есть пространство, ограниченное отступами, записывать туда что-то будет бесполезно, кроме как абстрактные “Блок N”, с заранее запланированными явными размерами. Гордиться говнокодом конечно та еще проблема.

24
CSS 
.block {
  box-sizing: border-box;
  margin-bottom: 20px;
  background-color: rgba(0, 255, 255, 0.2);
  border: 2px solid white;
}

.block1 {
  width: 200px;
  min-height: 40px;
}

.block2 {
  width: 140px;
  min-height: 60px;
  margin-left: 120px;
  padding: 10px 40px;
}

.block3 {
  width: 200px;
  min-height: 60px;
  margin-left: 20px;
  padding: 5px;
  border: 12px solid white;
}

Знаю, что box-sizing изучается в курсе чуть дальше.
Но, здесь ему самое место.
С ним гораздо понятнее зачем блокам размеры, и зачем отступы внутри блоков.
И кратность 5, которую так любит академия, соблюдается…

2 лайка