Лучшее, что мне пока что пришло в голову: CSS margin-bottom от картинки до FOOTBALL SHOES будет равняться расстоянию от картинки до верхнего пикселя букв, минус ((leading - font-size)/2)-3.
В Фотошопе расстояние от картинки до верхнего пикселя заголовка равно 25px. Leading у текста 35px, а Font-size - 22.65px:
Т.е. CSS margin от картинки до текста с этими параметрами будет равняться 25px-((35px-22.65px)/2)-3=15.825px.
Попробовал, по этой формуле в браузере расстояние между картинкой и верхним пикселем заголовка также равняется 25px, как и в Фотошопе. Попробовал изменить Leading в фотошопе с 35px на 21px. Вбил в формулу, получил: 25px-((21px-22.65px)/2)-3=22.825px. И в браузере с line-height: 21px и margin-bottom: 22.825px расстояние от картинки до верхнего пикселя текста также равняется 25px.
При изменении шрифта в Фотошопе на Times New Roman расстояние от края картинки до верхнего пикселя букв изменяется с 25 до 27 пикселей(что и ожидалось). И если в CSS поменять на шрифт на Times New Roman, то в браузере тоже будет 27px. Ну и при изменении Leading'а и использовании формулы расстояния также сохраняются при смене шрифта. Т.е. по-моему эта формула работает с разными шрифтами.
Не вижу проблемы создать соответствующий плагин, который будет считать(но это не означает, что у меня хватит знаний его написать). Подобным макаром, наверное, можно посчитать и от заголовка до текста ниже, и соответственно от текста ниже до нижней картинки. Но я не знаю, будет ли формула таже от нижней части текста до другого слоя. Руками, конечно, долго считать расстояние от заголовка до параграфа т.к. вначале нужно вычислить нижнюю границу заголовка, а потом от неё уже считать margin по формуле выше.
Странно, правда, что до сих пор никто не сделал соответствующего плагина для подсчета расстояний от слоя до текста, учитывая Leading и шрифт
