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

alexx · 02.Январь.2016 22:02:41

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

Ineska · 03.Январь.2016 17:10:59

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

felmike · 05.Май.2016 13:29:35

.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%

MedVed · 17.Май.2016 20:55:27

вот мой вариант на 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;
}

rodskif · 23.Июнь.2016 08:02:56

Мои 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;
}

miha92 · 07.Июль.2016 12:00:10

А у меня вот так вышло на 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;

OligarhXx · 03.Февраль.2017 11:44:33

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

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

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

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

vboiko · 23.Март.2017 01:48:56

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

Alexander_Himchynsky · 23.Март.2017 18:09:16

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

dao-mn · 31.Март.2017 05:43:17

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

Spectrum26 · 23.Май.2017 21:37:32

Мой вариант на 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;

}

Ineska · 24.Май.2017 04:49:16

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

EvaMilos · 06.Август.2017 06:46:26

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

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

Ineska · 06.Август.2017 07:25:34

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

Mihail_Prokudin · 12.Август.2017 02:58:06

Здравствуйте. Объясните пожалуйста.
Вот в этом задании 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 считаю читерством. И думаю, что можно без него)

Ineska · 12.Август.2017 05:11:18

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

Emin_Gasanov · 01.Декабрь.2017 15:57:42

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

Ineska · 01.Декабрь.2017 16:42:57

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

Damir_27 · 15.Январь.2018 07:41:44

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

RomanOlejnik · 25.Январь.2018 17:23:36

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;
}
Ничего лишнего