У меня возник вопрос про padding присвоенному для псевдоэлемента, для чего он нужен? Правильно ли я понял, что он необходим, что бы в следующем задании к псевдоэлементу не прилипала фоновое изображение? Если это так, то отступ рассчитывается прямо от якобы(псевдо) блока в html? Если это так, то почему если выставить нулевой отступ, то фоновое изображение наезжает на псевдоэлемент, это потому что у псевдоэлемента абсолютное позиционирование?
Посчитал, что это важный момент и в будущем при верстке, это знание пригодится и хотелось бы узнать, правильно ли я все понял.
давайте наглядно вам помогу:
в 17 задание сразу переходите и выполните все требования.
потом добавьте это свойство обоим псевдоэлементам
outline: 2px dotted blue;
а вот это добавьте просто как новый селектор
* { outline: 2px dotted red; }
теперь вы наглядно видите зачем нужен паддинг (просто закомментируйте его и обратно).
заодно можете поиграться с background-position для псевдоэлементов, чтобы понять куда уходит фон сердечка для псевдоэлемента (поставьте 0 0, 0 100%, 50% 50%, и пр.)
1 лайк
Благодарствую! С границей намного яснее) Padding просто увеличивает размер псевдоэлмента, и создает место для изображения. Есть ли какая то причина, почему использовали padding, а не допустим height?
чисто утилитарно, попробуйте “поиграться со шрифтами”. если уменьшить размер шрифта, то и картинка подтянется с паддингом, т.е. “пропорции” не изменятся (ну не так явно, как это было бы с высотой).
хотя особо разницы нет (с высотой также поиграться можно)
1 лайк
Спасибо, очень помогли)