16/23

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

Сделал следующим образом:

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

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block1 {
}
.block2 {
padding: 18px 36px 20px 18px;
margin: 18px;
border: none;
}

Что интересно?

  1. Насколько это неправильно?
  2. Нормален ли тот факт, что блок1 мне вообще не пригодился.
  3. У меня получилось так сделать, потому что я неправильно рассуждаю или что? (выполняя данное действие я просто использовал ф12 и там проверял себя с помощью селекта и чудесного квадрата)
2

Использовать .block1 или не использовать - это дело ваше (хотя добавлять рамки каждому блоку, а потом убирать у второго - это лишняя работа на мой взгляд). Но вы нарушили условие задания, изменили высоту input. А значит - ваш вариант можно считать неправильным.
P.S. Изучение инструментов разработчика (F12) - это большой плюс.

3

а, я видимо случайно изменил и забыл про хейт, я думал. что стандарт 34. Собственно, чтобы мой вариант был абсолютно правильным и коротким, достаточно бордер из блока перенести в блок1, в блок2 убрать бордер и добавить хейт 38, так? я бы проверил самостоятельно, но у меня попытки закончились на сегодня

4

Проверите завтра самостоятельно, а еще может используете свойство box-sizing в своей работе, тогда можно будет говорить об абсолютной правильности.

5

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

6

Вы дописали новые свойства, а не изменили уже написанные. Так и нужно было сделать, ошибки здесь нет.

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

.block {
background: rgba(0, 255, 255, 0.2);
}
.block1 {
border: 2px solid #fff;
}
.block2 {
margin-top:18px;
margin-left: 18px;
margin-bottom: 18px;
margin-right: 18px;
padding: 20px;
}

совпадение 100%;

8

Не дублируйте сообщения, пожалуйста. Вы создали новую тему для своего решения, значит отсюда убирайте.