Your select boxes can be an incredibly functional element on your website. Here's how to style it to match the rest of your website's branding elements.
{1,4}
0
/* Apply to all four sides */ padding: 1em; /* top and bottom | left and right */ padding: 5% 10%; /* top | left and right | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 2em; /* Global values */ padding: inherit; padding: initial; padding: revert; padding: revert-layer; padding: unset;
The padding property may be specified using one, two, three, or four values. Each value is a padding =
<'padding-top'>{1,4}
2 or a padding =
<'padding-top'>{1,4}
3. Negative values are invalid.
- When one value is specified, it applies the same padding to all four sides.
- When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
- When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom.
- When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).
padding =
<'padding-top'>{1,4}
2
The size of the padding as a fixed value.
padding =<'padding-top'>{1,4}
3
The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by padding =
<'padding-top'>{1,4}
6) of the containing block.