padding-left: 16px; padding-right: 17px и соответственно следовать пиксель в пиксель - делать некачественную верстку, которая займет больше времени.
<h1 class="title">
<span class="title__w1">корм</span>
<span class="title__w2">для</span>
<span class="title__w3">домашних</span>
<span class="title__w4">кроликов</span>
</h1>.title {
display: grid;
grid-template-areas:
"w1 w2"
"w1 w3"
"w4 w4";
grid-template-columns: auto 1fr;
&__w1{
grid-area: w1;
font-size: 2.5em;
}
&__w2{
grid-area: w2;
}
&__w3{
grid-area: w3;
}
&__w4{
grid-area: w4;
font-size: 2em;
}
}header и footer к соответствующим тегам.Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила.
pink из элементов вложенных в блоки header и footer 1) Правильно ли я понял, что в статье говорится про position: absolute и position: relative?
position: absolute и position: relative являются частным случаем использования обертки, например:.some-wrapper {
position: relative;
}
.some {
position: absolute;
}<div class="some-wrapper">
<div class="some">content</div>
</div>style, изображения сконвертировать в base64 и заменить в соответствующих атрибутах src и значениях свойств background-*<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<style>
.bg-img{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
padding-top: 10px;
}
</style>
</head>
<body>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
<p>Изображение красной точки в base64 (img src)</p>
</div>
<div class="bg-img">Изображение красной точки в base64 (background-image)</div>
</body>
</html>