Are these valid values for margin and padding in CSS?
margin: 0px 10px;
padding: 5px 0px 10px;
I thought that you always had to specify all four sides:
margin: 0px 10px 0px 0px;
padding: 5px 0px 10px 0px;
Also, when I write CSS like margin: 0px 10px 0px 0px; my editor IntelliJ warns me that the px is redundant. Should properties like this be written differently?
You can specify fewer than 4 as a 'short-hand', which sets several properties to the same value at the same time; for example, the CSS documentation says:
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 */
The dimension (e.g. px) is redundant when (only when) the value is 0.
They are all correct, they are just different ways of writing something.
Long notation:
margin|padding: top right bottom left;
Shorthand notations:
margin|padding: top left&right bottom;
margin|padding: top&bottom left&right;
margin|padding: top&right&bottom&left;
And for the second question: If you write 0px, the unit is redundant, because zero is zero, regardless of unit, so you can just as well write 0 without any unit.
Also see the CSS documentation
It is not mandatory that you specify all the four attributes all the time. In your case margin: 0px 10px 0px 0px; can be better written as margin-right: 10px; if all other margin values are already 0. Also you need not add px if the value is 0.
Have a look at the shorthand notations also,
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)
The way that you choose to pick depends on the layout.
If every side is different, then you would do each side differently.
margin: 10px, 15px, 20px, 25px; ( of course you could use this any time, but that's the best example ).
If the tops and sides are the same then just do the first number for the top and bottom and the second number for the sides.
margin: 10px, 20px;
And if you want all 4 sides to have the same margin, then
margin: 10px; does all 4.
