Как правильно указать поля и отступы в CSS?

Являются ли эти действительные значения для margin а также padding в CSS?

margin: 0px 10px;
padding: 5px 0px 10px;

Я думал, что вы всегда должны были указывать все четыре стороны:

margin: 0px 10px 0px 0px;
padding: 5px 0px 10px 0px;

Кроме того, когда я пишу CSS, как margin: 0px 10px 0px 0px; мой редактор IntelliJ предупреждает меня, что px избыточно Должны ли такие свойства быть написаны по-другому?

Для тех, кто читает этот пост, ответ лежит во всех ответах. Каждый уточняет стенографию. Спасибо всем, кто откликнулся.

Источник

4 ответа

Решение

Вы можете указать менее 4 как "сокращение", которое устанавливает несколько свойств в одно и то же время одновременно; например, документация CSS гласит:

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

Размер (например, px) является избыточным, когда (только когда) значение 0,

Источник

Они все правильные, это просто разные способы что-то написать.

Длинные обозначения:

margin|padding: top right bottom left;

Сокращенные обозначения:

margin|padding: top left&right bottom;
margin|padding: top&bottom left&right;
margin|padding: top&right&bottom&left;

И для второго вопроса: если вы пишете 0px, единица избыточна, потому что ноль равен нулю, независимо от единицы, так что вы также можете написать 0 без каких-либо единиц.

Также смотрите документацию CSS

Источник

Не обязательно указывать все четыре атрибута постоянно. В твоем случае margin: 0px 10px 0px 0px; может быть лучше написано как margin-right: 10px; если все остальные значения полей уже 0. Также вам не нужно добавлять px если значение равно 0.

Взгляните также на стенограммы,

margin: 0px; (top, right, bottom, left - 0px)

margin: 2px 4px; (top and bottom - 2px, right and left - 4px)

margin: 2px 4px 6px; (top - 2px, right and left - 4px, bottom - 6px)
Источник

Способ, который вы выберете, зависит от макета.

Если каждая сторона отличается, то вы бы сделали каждую сторону по-разному.
margin: 10px, 15px, 20px, 25px; (конечно, вы можете использовать это в любое время, но это лучший пример).

Если вершины и стороны одинаковы, просто введите первое число для верха и низа и второе число для сторон.
margin: 10px, 20px;

И если вы хотите, чтобы все 4 стороны имели одинаковое поле, то
margin: 10px; делает все 4.

Источник
Другие вопросы по тегам