At first glance, padding seems to have an effect identical to margins: It adds space around the element’s content. The difference is that padding sets the space between the border of the element and its content rather than between the element and the other elements in the window. Padding is useful when you’re using borders and background colors and don’t want the content butting right up to the edges. To set padding: 1. Start your declaration by typing the padding property name, followed by a colon (:) padding: 2. Type a value for the element’s padding. 10px; Use one of the following values: Length values, which create padding of the exact size you specify A percentage, which creates padding proportional to the parent element’s width inherit to use the parent’s padding value To set each side’s padding value separately, you can type from one to four values. One value sets the padding for all four sides. Two values set the padding for the top/bottom and left/right sides. Three values set the top padding, the padding for the left/right sides (the same), and the bottom padding. Four values set the padding for each side in this order: top, right, bottom, and left. 3. As with margins, padding can also be set independently on all four sides of the box (top, right, bottom, and left).
Padding Classes | |
---|---|
Class | Defines |
w3-padding-small | Padding 4px top and bottom, and 8px left and right. |
w3-padding | Padding 8px top and bottom, and 16px left and right. |
w3-padding-large | Padding 12px top and bottom, and 24px left and right. |
w3-padding-16 | Padding 16px top and bottom |
w3-padding-24 | Padding 24px top and bottom |
w3-padding-32 | Padding 32px top and bottom |
w3-padding-48 | Padding 48px top and bottom |
w3-padding-64 | Padding 64px top and bottom |
w3-padding-tiny | Deprecated (Use CSS padding instead) |
w3-padding-medium | Deprecated (Use w3-padding instead). |
w3-padding-xlarge | Deprecated (Use CSS padding instead) |
w3-padding-xxlarge | Deprecated (Use CSS padding instead) |
w3-padding-jumbo | Deprecated (Use CSS padding instead) |
w3-padding-4 | Deprecated (Use CSS padding instead) |
w3-padding-8 | Deprecated (Use CSS padding instead) |
w3-padding-12 | Deprecated (Use CSS padding instead) |
w3-padding-128 | Deprecated (Use CSS padding instead) |
w3-padding-0 | Deprecated (Use CSS padding:0 instead) |
w3-padding-left | Deprecated (Use CSS padding-left instead) |
w3-padding-right | Deprecated (Use CSS padding-right instead) |
w3-padding-top | Deprecated (Use CSS padding-top instead) |
w3-padding-bottom | Deprecated (Use CSS padding-bottom instead) |