Atributo CSS row-gap
Definición y uso
El atributo row-gap especifica el espacio entre las filas en el diseño del cuadro flexible o de la cuadrícula.
El atributo row-gap se llamaba anteriormente grid-row-gap.
Véase también:
Tutorial CSS:Diseño de cuadrícula CSS
Tutorial CSS:Diseño de cuadro flexible CSS
Manual de referencia CSS:Atributo gap
Manual de referencia CSS:Atributo column-gap
Ejemplo
Ejemplo 1
Especifique un espacio de 50 píxeles entre las filas de la cuadrícula:
#grid-container { display: grid; row-gap: 50px; }
Ejemplo 2: Diseño del cuadro flexible
Establezca el espacio entre las líneas en el diseño del cuadro flexible en 70px:
#flex-container { display: flex; row-gap: 70px; }
Sintaxis de CSS
row-gap: longitud|normal|initial|inherit;
Valor | Descripción |
---|---|
longitud | Establezca la longitud específica o el valor por ciento del espacio entre las líneas. |
normal | Valor predeterminado. Define el espacio normal entre las líneas. |
initial | Establezca esta propiedad en su valor predeterminado. Véase initial. |
inherit | Hereda esta propiedad de su elemento padre. Véase inherit. |
Detalles técnicos
Valor predeterminado: | normal |
---|---|
Herencia: | no |
Producción de animación: | Admite. Consulte las propiedades individuales. Véase:Propiedades relacionadas con la animación. |
Versión: | Módulo de Alineación de Caja CSS Nivel 3 |
Sintaxis de JavaScript: | object.style.rowGap="50px" |
Compatibilidad del navegador
Los números en la tabla indican la primera versión del navegador que admite esta propiedad.
disposición | Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
en la cuadrícula | 66 | 16 | 61 | 12 | 53 |
en el cuadro flexible | 84 | 84 | 63 | 14.1 | 70 |