Atributo column-gap de CSS
- la página anterior column-fill
- Página siguiente column-rule
definición y uso
la propiedad column-gap establece el espacio entre las columnas.
nota:si se establece entre las columnas column-rulese mostrará en el medio del espacio.
véase también:
tutorial de CSS3:CSS3 columnas múltiples
manual de referencia de HTML DOM:propiedad columnGap
ejemplo
establece el espacio entre las columnas en 40 píxeles:
div { column-gap: 40px; }
hay más ejemplos en la parte inferior de la página.
sintaxis de CSS
column-gap: longitud|normal;
valor de la propiedad
valor | descripción | pruebas |
---|---|---|
longitud | establece el espacio entre las columnas a una longitud especificada. | pruebas |
normal | establece el espacio entre las columnas como un espacio normal. W3C recomienda el valor de 1em. | pruebas |
detalles técnicos
valor por defecto: | normal |
---|---|
herencia: | no |
versión: | CSS3 |
Sintaxis de JavaScript: | object.style.columnGap="40px" |
más ejemplos
- Column-count
- divide el texto del elemento div en tres columnas.
- Column-rule
- establece el ancho, estilo y color entre las columnas.
soporte del navegador
Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.
los números con -webkit- o -moz- indican la primera versión con prefijo utilizada.
propiedad | Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
en múltiples columnas | 50 | 10 | 52 | 10 | 37 |
en la cuadrícula | 66 | 16 | 61 | 12 | 53 |
en el cuadro elástico | 84 | 84 | 63 | 14.1 | 70 |
- la página anterior column-fill
- Página siguiente column-rule