los column-gap CSS propiedad establece el tamaño de la brecha (canal) entre las columnas de un elemento.

Inicialmente una parte del diseño de varias columnas, la definición de column-gap se ha ampliado para incluir varios métodos de diseño. Ahora especificado en Alineación de cajas, se puede utilizar en diseños de varias columnas, cajas flexibles y cuadrículas.

Sintaxis

/* Keyword value */
column-gap: normal;

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

los column-gap La propiedad se especifica como uno de los valores que se enumeran a continuación.

Valores

normal
El espaciado predeterminado del navegador se usa entre columnas. Para el diseño de varias columnas, esto se especifica como 1em. Para todos los demás tipos de diseño es 0.
<length>
El tamaño del espacio entre columnas, definido como un <length>. los <length> El valor de la propiedad no debe ser negativo.
<percentage>
El tamaño del espacio entre columnas, definido como un <percentage>. los <percentage> El valor de la propiedad no debe ser negativo.

Definicion formal

Valor inicial normal
Se aplica a elementos de varias columnas, contenedores flexibles, contenedores de rejilla
Heredado no
Porcentajes referirse a la dimensión correspondiente del área de contenido
Valor calculado como se especifica, con Se hace el cálculo absoluto y normal a cero, excepto en elementos de varias columnas.
Tipo de animación una longitud, porcentaje o calc ();

Sintaxis formal

normal | <length-percentage>
where 
<length-percentage> = <length> | <percentage>

Ejemplos de

Diseño flexible

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

Resultado

Diseño de cuadrícula

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Resultado

Diseño de varias columnas

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS `column-gap` property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de alineación de cajas CSS, nivel 3
La definición de ‘espacio entre columnas’ en esa especificación.		 Borrador de trabajo Se aplica a grid y flexbox
Diseño de cuadrícula CSS
La definición de ‘espacio entre columnas’ en esa especificación.		 Recomendación candidata Especifica cómo afecta esta propiedad a los diseños de cuadrícula.
Módulo de diseño de múltiples columnas CSS
La definición de ‘espacio entre columnas’ en esa especificación.		 Borrador de trabajo Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
column-gap

50 1

12 12

52 1.5-74 Antes de Firefox 3, el valor predeterminado para el normal la palabra clave era 0 y no 1em.

10

37 15 11,1-15

10 3

50 ≤37

50 18

52 4

37 14 11.1-14

10 3

5,0 1,0

calc_values 66 dieciséis 61 No 53 No 66 66 61 47 No 9.0
percentage_values 66 dieciséis 61 No 53 No 66 66 61 47 No 9.0
Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
column-gap

66 57

16 16

61 52

No

53 44

12,1 10,1

66 57

66 57

61 52

47 43

12 10,3

9,0 6,0

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
column-gap 84 84 63 No 70 14,1 84 84 63 No 14,5 No

Las tablas BCD solo se cargan en el navegador

Soporte en diseño de cuadrícula

Las tablas BCD solo se cargan en el navegador

Soporte en diseño de varias columnas

Las tablas BCD solo se cargan en el navegador

Ver también

  • Propiedades CSS relacionadas: row-gap, gap
  • Guía de diseño de cuadrícula: Conceptos básicos de diseño de cuadrícula – Canalones
  • Guía de diseño de varias columnas: Columnas de estilo