Первое испытание [8/23


#46

Привет, вот мой код, он правилен на 96%. Какие здесь ошибки?

body {
margin: 0;
padding: 0;
}

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 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;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}

.block1 {
margin: 0px 340px 20px 0px;
padding-bottom:;
height:36px;
}

.block2 {
margin: 20px 280px 20px 120px;
padding: 10px 50px 10px 40px;
height:36px;
width:46px
}

.block3 {
border:10px solid white;
margin:0px 0px 0px 20px;
padding-top:5px;
width:180px;
height:35px;
}


#47

Результат 100%

.block1{
width: 196px;
height: 36px;
}
.block2{
width: 56px;
height: 36px;
padding: 10px 40px ;
margin: 20px 120px;
}
.block3{
width: 166px;
height: 26px;
margin: 20px;
padding: 5px;
border-width: 12px;
}


#48

100%

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
padding-bottom: 15px;
width: 196px;
}
.block2 {
margin-top: 20px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 25px;
padding-top: 10px;
margin-left: 120px;
width: 56px;

}
.block3 {
border: 12px solid;
margin-top: 20px;
margin-left: 20px;
padding-left: 5px;
padding-top: 5px;
width: 171px;
height: 16px;

}


#49

Позиционирование было в Знакомство с CSS правда очень кратко и рассказали только про значение absolute. Поэтому я выполнила задание используя position: absolute :wink:


#50

Подскажите, пожалуйста, как решается противоречие между заданными размерами блока и его внешними отступами?
.block2 {
width: 96px;
margin: 20px 120px;
padding: 10px 0 25px 40px;
}
С одной стороны задана ширина блока 96px, с другой стороны указан размер отступа от блока слева и справа 120px. Там же справа явно не 120px


#51

Указывайте отступ только слева.


#52

Я не совсем корректно задал вопрос. Такой вариант, отрывок который я разместил, указал DevilInRed_ru 20 февраля, и его вариант верный, не дает ошибок. Но не понятно почему указание margin: 20px 120px не растягивает границы блока вправо до отступа от окна браузера на 120px? Ведь насколько я помню если классы приоритетов равны, то работает тот селектор который ниже. А значение внешнего отступа стоит ниже значения границы блока


#53

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


#54

Пардон. Это не селектор. Это свойство. Но все равно, вопрос остался: Почему свойство ширины блока менее приоритетно чем значение внешнего отступа?


#55

Я понял. Спасибо


#56

Всем доброго времени суток! Вот такое решение получилось у меня. Задание выполнено на 100%. Правда немного схитрил (использовал св-во которое не было изучено в уроках ранее).

.block1 {
height: 36px;
width: 196px;
margin-bottom: 20px;
}

.block2 {
height: 60px;
width: 140px;
margin-left: 120px;
margin-bottom: 20px;
box-sizing: border-box;
padding-left: 40px;
padding-top: 10px;
}

.block3 {
border-width: 12px;
height: 60px;
width: 200px;
margin-left: 20px;
box-sizing: border-box;
padding-left: 5px;
padding-top: 5px;
}