Всем привет, подскажите пожалуйста насколько валидный код я написал для решения этой задачи, потому что у всех варианты совсем другие.
/* Базовые стили, изменять не нужно */
html,
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(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}
.block {
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block1 {
width: 196px;
height: 36px;
margin-bottom: 20px;
}
.block2 {
margin-left: 120px;
margin-bottom: 20px;
padding-top: 10px;
padding-left: 40px;
height: 46px;
width: 96px;
}
.block3 {
margin-left: 20px;
border-width: 12px;
padding: 5px;
width: 166px;
height: 26px;
}
честно говоря, когда я впервые выполнял это задание, я сделал почти также как вы. а потом мне рассказали про свойство box-sizing: border-box;, которое добавил общему классу block и теперь не нужно высчитывать пиксели. тупо задаем размер блокам как есть. имхо полегче становится.
border-box
html,
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("grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}
.block {
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
box-sizing: border-box;
}
.block1 {
width: 200px;
height: 40px;
}
.block2 {
width: 140px;
height: 60px;
margin: 20px 0 20px 120px;
padding-top: 10px;
padding-left: 40px;
}
.block3 {
width: 200px;
height: 60px;
margin-left: 20px;
border-width: 12px;
padding: 5px;
}
4 лайка