Atrybut padding w CSS
- poprzednia strona overscroll-behavior-y
- Następna strona padding-block
Definition and usage
The padding shorthand property sets all padding properties in one declaration.
Description
This shorthand property sets the width of all padding of an element, or sets the width of padding on each side. Padding set on inline non-replaced elements does not affect line height calculation; therefore, if an element has both padding and background, it may visually extend to other lines and may even overlap with other content. The element's background extends through the padding. Negative padding values are not allowed.
Note:Negative values are not allowed.
Example 1
padding:10px 5px 15px 20px;
- Top padding is 10px
- Right padding is 5px
- Bottom padding is 15px
- Left padding is 20px
Example 2
padding:10px 5px 15px;
- Top padding is 10px
- Right and left paddings are 5px
- Bottom padding is 15px
Example 3
padding:10px 5px;
- Top and bottom paddings are 10px
- Right and left paddings are 5px
Example 4
padding:10px;
- All 4 paddings are 10px
See also:
CSS Tutorial:Wewnętrzny margines CSS
HTML DOM Reference Manual:padding property
CSS syntax
padding: length|initial|inherit;
Property value
Value | Description |
---|---|
auto | Browser calculates padding. |
length | Specifies the padding value in a specific unit, such as pixels, centimeters, etc. The default value is 0px. |
% | Specifies padding as a percentage of the parent element's width. |
inherit | Specifies that padding should be inherited from the parent element. |
Technical details
Default value: | 0 |
---|---|
Inheritance: | no |
Version: | CSS1 |
JavaScript syntax: | object.style.padding="10px 5px" |
Próbuj sam
- Wszystkie wewnętrzne marginesy w jednym deklaracie
- Ten przykład pokazuje, jak używać skróconych właściwości, aby ustawić wszystkie wewnętrzne marginesy w jednym deklaracie, co może obejmować od jednego do czterech wartości.
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- poprzednia strona overscroll-behavior-y
- Następna strona padding-block