Второе испытание [16/23]. Мое решение на 100% и подробная инструкция.

[w15]

Само по себе задание не сложное и код очень короткий. Основные CSS правила уже были написаны изначально. Итак посмотрим на HTML-код. У нас есть контейнер div с классами block и block1 со стилями высочайшего приоритета, которые мы не сможем переопределить, да это нам и не нужно . внутри расположен еще один контейнер div с классами block и block2 с полем ввода(input) и стилями для этого поля.
сразу видим подсказку - ширина 100% для input.

Воспользуемся первой подсказкой и в CSS-редакторе для input добавим наше очень удобное свойство box-sizing со значением border-box, а так-же сделаем отступ слева для текста в поле ввода.

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
> padding-left: 10px; - отступ для текста
> box-sizing: border-box; - режим расчета ширины элемента с учетов
}

Теперь у нас все красиво! Одна клеточка 20px, высота input 38px + 2px рамка и того 40 px, либо 2 клеточки по высоте, а не так как было в предыдущем задании, где приходилось по 1 пикселю подбирать. А тут у нас pixel-perfect
Короче говоря box-sizing: border-box - маст хев, юзайте его!

Идем дальше.
Следующая подсказка - это наш бекграунд с прозрачностью, он нам поможет видеть наши внешние и внутренние отступы для block2, но сначала разберемся с block1.

Мы помним, что для block1 у нас свои “непробиваемые стили”, и все, что нам остается, это задать ему рамку.

.block1 {
border: 2px solid white;
}

Переходим к завершающему этапу.
Рамка у нас задана для block1, а значит мы видим его границы, поскольку block2 лежит внутри block1, которому задана рамка, значит здесь у нас срабатывает “выпадание” внешних отступов.
Задаем для block2 внутренний отступ в 20px, далее берем в расчет рамку в 2px нашего input и задаем внешний отступ в 18 px.

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

Готово! Задание выполнено. Основная ошибка из-за которой люди не могут пройти задание - это не использование свойства box-sizing: border-box, еще проблема с пониманием принципа работы «выпадания» внешних отступов, но это дело практики. Спасибо за внимание.

[Offtop_Qx]

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

Что-то на этом этапе у вас пошло не так, ведь чтобы сохранить цвет фона аналогичный заданию, надо дать внешние отступы контейнеру блок2 , а именно:

.block2 {
margin: 18px;
}

и внутренние отступы нашему основному контейнеру block

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

[w15]

А в чем разница?
Внешние отступы для block2 я задал 18px;
По скольку основной и внутренний контейнер имеют общий класс block, нет никакой разницы кому задавать внутренний отступ, все равно он сработает только для block2, т.к. для block1 будут применены стили прописанные в html.

[Offtop_Qx]

Странно, в начале проверил твой вариант, он учёл сам паддинг, но бэкграунд оставался одного цвета и задание было выполнено на 98%.
Сейчас перепроверил, всё норм.

[SPG]

Добрый день! Возможно это просто неудачное описание задания, а возможно я неправильно понял задание.
В условиях задачи, в поле редактора CSS в комментариях прописано, мол ребята /* Базовые стили, изменять не нужно /
и в самом низу еще комментарий мол, вот ребята вот тут пишите, что хотите чтоб работало / Пользовательские стили */.

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

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

padding-left: 10px; - отступ для текста
box-sizing: border-box; - режим расчета ширины элемента с учетов
}

Я думал в этом и суть задачи, что бы справится без изменения этого элемента. но у меня не вышло, на 2 пикселя поле ввода ни как не хотело уменьшаться.

[Ineska]

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

[yulya_9060]

Объясните, почему мы padding задаем внутреннему блоку и все равно получается правильно? ведь в уроках мы margin задавали внутреннему блоку, а padding внешнему?

[Justfine]

Как вариант, можно использовать только padding.

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

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

.block2 {
padding: 20px;
}

[nerealist]

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;
}

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

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

.block1 {
width: 520px;
height: 118px;
border: 2px solid white;
box-sizing: border-box;

}

.block2 {
width: 480px;
height: 78px;
box-sizing: border-box;
margin: 18px;
padding: 20px;
}

[Pavlo]

Спасибо. Достаточно детальное и понятное объяснение!
С уважением Павел.

[Moby]

Я работаю в Mozilla Firefox.
С этим заданием провозился более 1 часа.

В селекторе input[type=“text”] я добавлял свойство box-sizing: border-box; и поле не уменьшало свою ширину.
Я прочитал статью про свойство box-sizing, и в конце там написано, что в Mozilla Firefox существует ошибка, связанная с этим свойством.

[Lure_Mode]

Странно, у меня тоже 100%, но в .block1 у меня width не 520px, а 516px.

Мой код:

.block1 {
    border: 2px solid white;
    width: 516px;
    }
.block2 {
    padding: 20px;
    margin: 18px;
}
input[type="text"] {
    box-sizing: border-box;
    padding: 10px;
}

[Ineska]

Еще рамка с двух сторон по 2px, вот и недостающие пиксели. Рамка тоже влияет на итоговую ширину блока.

[Den94]

Не знаю, имеет ли место быть моё решение, но я решил с минимальным кол-вом строк:

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

}

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

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