Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
padding-block-start
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
Experimental:Esta es unatecnología experimental
Comprueba laTabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
La propiedad deCSSpadding-block-start define el bloque lógico de inicio de relleno de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedadespadding-top,padding-right,padding-bottom, orpadding-left dependiendo de los valores definidos porwriting-mode,direction, ytext-orientation.
Esto se relaciona conpadding-block-end,padding-inline-start, ypadding-inline-end, que define los otros rellenos del elemento.
Pruébalo
padding-block-start: 20px;writing-mode: horizontal-tb;padding-block-start: 20px;writing-mode: vertical-rl;padding-block-start: 5em;writing-mode: horizontal-tb;padding-block-start: 5em;writing-mode: vertical-lr;<section> <div> <div> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. </div> </div></section>#example-element { border: 10px solid #ffc129; overflow: hidden; text-align: left;}.box { border: dashed 1px; unicode-bidi: bidi-override;}Sintaxis
/* <length> values */padding-block-start: 10px; /* An absolute length */padding-block-start: 1em; /* A length relative to the text size *//* <percentage> value */padding-block-start: 5%; /* A padding relative to the block container's width *//* Global values */padding-block-start: inherit;padding-block-start: initial;padding-block-start: unset;| Valor inicial | 0 |
|---|---|
| Applies to | all elements, excepttable-row-group,table-header-group,table-footer-group,table-row,table-column-group andtable-column |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | as<length> |
| Animation type | alength |
Valores
La propiedadpadding-block-start toma los mismos valores de la propiedadpadding-left.
Sintaxis formal
padding-block-start =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
Ejemplo
Contenido HTML
<div> <p>Example text</p></div>Contenido CSS
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800;}Especificaciones
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # padding-properties |
Compatibilidad con navegadores
Mira también
- Las propiedades físicas mapeadas:
padding-top,padding-right,padding-bottom, ypadding-left writing-mode,direction,text-orientation