Второе испытание.

[Marina_D]

/* Базовые стили, изменять не нужно */
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;
}

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
}

.block {
background: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
.block1 {
height: 114px;
border: 2px solid white;
}

.block2 {
margin: 18px;
padding: 20px;
}

input {
padding-left: 10px;
box-sizing: border-box;
}

[Omenin48]

Минимум кода и на 100%

.block1 {
border: 2px solid white;
}

.block2 {
margin: 18px;
box-sizing: border-box;
padding: 20px;
}

input[type=“text”] {
box-sizing: border-box;
padding: 10px;
}

[evgeniy_vls]

100%
input[type=“text”] {
height: 38px;
box-sizing: border-box;
font-size: 18px;
font-family: inherit;
padding-left: 10px;
border: 2px solid #cccccc;
border-radius: 5px;
}

.block {
background-color: rgba(0, 255, 255, 0.2);
}
.block1 {
padding: 18px !important;
border: 2px solid #ffffff;
}
.block2 {
padding: 20px;
}

[A.Honcharou]

В базовых стилях ничего не менял и не трогал их вообще. Данное решение полностью на 100%

.block1 {
border: solid 2px white;
}
.block2 {
padding: 20px;
margin: 18px;
}
.block2 input {
box-sizing: border-box;
padding: 10px;
}

[Kak_Alisa_tolko_Valera]

А я не задавал во втором блоке box-sizing, без этого обошелся.

[b-612]

Тоже 100%

/* Пользовательские стили */

.block1 {
border: 2px solid white;
}

.block2 {
margin: 18px;
padding: 20px;
}

input[type=“text”] {
box-sizing: border-box;
width: 480px;
padding: 0 10px;
}

[elsa]

Я немного схитрила с !important
В итоге получилось 100%, но допустимо ли?)

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: inherit;
border: 2px solid #cccccc;
border-radius: 5px;
padding-left: 10px;
box-sizing:border-box;
}

.block {
background-color: rgba(0, 255, 255, 0.2);
padding:20px;
}

.block1 {
padding:18px !important;
border: 2px solid white;
}

[The_road_up]

У меня два вопроса:

1. В задании написано, что все размеры кратны 20, почему тогда в решении появляется значение padding-left: 10px;?

2. Схема ведёт себя одинаково, что с box-sizing: border-box, что без него посмотрите сами:

    /* Любые изменения в коде одинаково влияют на схему что с box-sizing: border-box, что без него*/
        .block-1 {
          border: white 20px solid;
        }
        .block-2 {
          margin: 20px;
          padding: 20px;
        }
   

Я не понимаю, зачем вообще в этом задании нужен box-sizing: border-box ?

[juwain]

Привет.

1. вы имеете в виду паддинг внтури инпута? если да, то эти стили изначально предустановлены, а правило про кратность относится к стилям, которые нужно написать пользователю.

2. попробуйте в дополнение к этому коду добавить разный box-sizing для .text-input, вот такое получится:
   
   

[Da1BeR6]

100%

/* Базовые стили, изменять не нужно */
.block {
background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
.block-1 {
border: 20px solid white;
width: 480px;
height: 120px;
}

.block-2 {
margin: 20px;
padding: 20px;

}

.text-input {
box-sizing: border-box;
}

[OpiktRUS]

.block-1 {
  border: 20px solid white;
}

.block-2 {
  margin: 20px 20px 20px 20px;
  padding: 20px 20px 20px 20px;
}

.text-input {
  box-sizing: border-box;
}

[DM18]

/* Пользовательские стили */
.block-1 {
border: 20px solid white;
}

.block-2 {
margin: 20px;
padding: 20px;
}

.text-input {
box-sizing: border-box;

[ZiloK45]

/* Базовые стили, изменять не нужно */
.block {
  background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
.block-1 {
  border: 20px solid white;
}

.block-2 {
  margin: 20px;
  padding: 20px;
}

.text-input {
  box-sizing: border-box;

}