← Все вопросы
Чем отличаются единицы px, % и em в CSS? Когда какую использовать
7
Видел размеры в px, в % и в em. Все вроде задают размер, но ведут себя по-разному. Объясните разницу простыми словами и что новичку выбрать.
2 ответа
11
✓ Принятый ответ — помог автору
Три единицы — три логики:
- px (пиксели) — абсолютный, фиксированный размер.
width: 200pxвсегда 200 точек, что бы ни было вокруг. Самый понятный для старта. - % (проценты) — относительно родителя.
width: 50%= половина ширины родительского блока. Удобно для резиновой/адаптивной вёрстки. - em — относительно размера шрифта этого элемента.
font-size: 16pxиpadding: 1em= 16px. Если шрифт станет 20px, то и1emстанет 20px. Хорошо для отступов, которые масштабируются вместе с текстом.
Новичку: начни с px — он предсказуемый. Проценты бери для ширины блоков, чтобы они подстраивались под экран. em оставь на потом.
4
Есть ещё rem — как em, но считается от шрифта корня (тега html), а не родителя. Поэтому он удобнее em: не зависит от вложенности и не «накапливается». Многие сейчас задают шрифты в rem, а px используют для рамок и мелочей.
Ваш ответ
Войдите, чтобы ответить на вопрос.