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


#1

95%
Нужно немного поднять текст. Подскажите как? Спасибо.

.block1 { 
    width: 256px;
    height: 114px;
    padding-right: 20px;
    border: 2px solid white;

}

.block2 {
    width: 220px;
    height: 78px;
    margin-left: 18px;
    margin-top: 18px;
    

}

input[type="text"] {
width: 165px !important;

height: 30px;
margin-top: 20px;
margin-left: 20px;
padding-left: 10px;
padding-bottom:3px;
}

#2

У меня получилось так. Может кто-то предложит вариант лучше.
input[type=“text”] {
width: 180px !important;
margin-top: 20px;
margin-left: 20px;
padding-left: 10px;
box-sizing: border-box;
}
Подробнее о свойстве box-sizing здесь.


#3

.block1 {
box-sizing:border-box;
border:2px solid white;
}
.block2{
box-sizing:border-box;
margin: 18px;
}
input[type=“text”] {
width: 440px !important;
box-sizing:border-box;
margin: 20px;
padding-left:10px;
}
выдает 100%


#4

вот мой вариант на 100%. Выделенное жирным добавил.
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;
}
.block1 {
border: 2px solid white;
}
.block2 {
margin: 18px;
padding: 20px;
height: 38px;
}


#5

Мои 100% без использования !important

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

.block1 {
width: 516px;
height: 114px;
border: 2px solid white;
}

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


#6

А у меня вот так вышло на 100%:

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;

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

}
.block1 {
width: 516px;
height: 114px;
border: 2px solid white;


#7

У меня как то так 100% в итоге.

.block1{
border:2px solid white;
height:114px;
}

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

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


#8

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


#9

100%

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

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

.block2 {
width: 480px;
margin: 18px auto;
padding: 20px;
box-sizing: border-box;
}
.block input {
padding:0 0 0 10px;
width: 460px;
height: 38px;
font-weight: 500;
box-sizing: border-box;
}


#10

На все 100%
.block2 {
padding: 20px;
margin: 18px;
}
.block1 {
border: 2px solid white;
}
input {
padding: 10px;
box-sizing: border-box;
}


#11

Мой вариант на 100%

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 {
padding: 17px !important;
border: 2px solid #ffffff;
margin: 0 auto;
}

.block2 {
padding: 20px !important;
margin: 1px;

}


#12

Использование !important - это плохая практика.


#13

Хотела бы получить обратную связь по коду, есть какие-либо замечания?

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;
padding-left: 10px;
box-sizing: border-box;
}

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


#14

Могли написать просто margin: 18px;


#15

Здравствуйте. Объясните пожалуйста.
Вот в этом задании https://htmlacademy.ru/courses/44/run/7 очень хорошо рассказывается блочная модель документа. Я её понял.
Однако в этом задании https://htmlacademy.ru/courses/44/run/16 мой мозг сломался. Почему ширина блока2 равна 440 пикселей (найдено методом подбора)?
Судя по рисунку, размер внутренней закрашенной области 480 пикселей. Однако тогда форма выпадет.
Или у блока2 фон применяется даже для пространства маргинов? Расскажите, пожалуйста, где именно на рисунке блок1 и блок2? Можно даже в личные сообщения https://vk.com/silentflame
Я буду очень рад.
А пока что я просто подобрал цифры без особого понимания принципа работы. (применение слова !important считаю читерством. И думаю, что можно без него)


#16

Вы не учли padding справа и слева по 20px. А это еще +40px к ширине, прописанной в width.


#17

на 100%. Единственное не могу понять: почему высота у block1 составляет 114рх, если сложить содержимое этого блока, то там набирается высота в 116рх.

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

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


#18

Высота первого блока равна 118px. Я так понимаю, вы не учли рамку сверху и снизу по 2px.


#19

/* Базовые стили, изменять не нужно */
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;
padding: 0 10px;
box-sizing: border-box;
}

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

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

.block1 {
border: 2px solid white;
}
.block2 {
padding: 20px;
margin: 18px;
}


#20

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{
border: 2px solid white;
}
.block2{
margin:18px;
padding:20px;
}
Ничего лишнего