Мобильный LiveInternet Разбираюсь с padding (комментарии для замечаний, чтобы разобраться самой до конца)

Авторизация

Дневник tomishka Лента друзей - Дневник - Полная версия

Разбираюсь с padding (комментарии для замечаний, чтобы разобраться самой до конца) 28-04-2026 11:36 к комментариям - к полной версии - понравилось!

Возьмем картинку, размер которой 700*525, и картинку с однотонным фоном зеленого цвета, размер которой 600*425. Размер выбран так, что меньшую картинку можно наложить на большую с одинаковым отступом по всему периметру в 50px. Посмотрим, что мы при этом увидим.

Места, для размещения картинки с указанными отступами, не хватило. Оказывается, что есть еще стандартный отступ, который надо учитывать. При размещении зеленой картинки с отступом в 50px сверху и справа места хватает, а вот снизу и слева уже не хватает. Идет повтор картинки, сначала для осуществления указанного отступа снизу, а потом слева. Для определения величины значения стандартного отступа первые два отступа оставим прежними, отступ слева возьмем нулевым, а отступ снизу (50) будем уменьшать до тех пор, пока не избавимся снизу от повтора картинки.

50 пришлось уменьшить до 34, чтобы снизу повторение картинки исчезло. 50+34=84, 100-84=16, 16/2=8, значит стандартный отступ по всему периметру равен 8. Значит для размещения нашей зеленой картинки на другой картинке с одинаковым отступом по всему периметру мы должны предусмотреть отступ в 42px ( 50-8=42).

А теперь на нашей картинке разместим бабочку. Изменяя значения отступов, можно поместить бабочку в любое место.

А это плавает золотая рыбка.

А на этой картинке парит орел.

Вот так обычную картинку можно оживить удачно подобранной гифкой.

вверх^ к полной версии понравилось! в evernote

Комментарии (20):

Елена_Краева 28-04-2026-12:51 удалить

Лидочка, обалдеть)) Вы такая молодец! Я бы ни за что не разобралась в таких вещах)))

Вы сейчас не можете прокомментировать это сообщение.