FRONT | Фронтенд | JavaScript | CSS | TanStack Start 1.0 | Vite 8 | Next.js 16.4 | TypeScript в Rust | React 19.3 | Bun 1.4.4 | Playwright 1.64 | SvelteKit 3.0 | Astro | WebMCP | Deno | Preact 11
IT и технологии · 25 октября 2026 г.
Иконка рядом с текстом висит выше или ниже строки: минусовый margin спасает до смены шр...
Иконка рядом с текстом висит выше или ниже строки: минусовый margin спасает до смены шрифта. Оптический центр — не середина line-box, а половина от baseline до высоты заглавных: иконка раздувает строку. Пустая инлайн-обёртка с position: relative и шириной руками, иконка внутри absolute высотой var(--icon-height), bottom: calc(var(--optical-center) - var(--icon-height) / 2). Замеры на DejaVu Sans 56px. Как есть line-box 92,2px, центр иконки на 18,8px выше оптического. vertical-align: middle даёт 78px, центр на 5px ниже. С приёмом line-box 67,19px, отклонение нулевое. cap с Chrome 118, lh с Chrome 109. Фолбэк: --optical-center: calc(0.72em / 2), в @supports (height: 1cap) — 1cap/2. https://habr.com/ru/companies/avito/articles/1080464/