La propiedad column-gap en CSS se usa para especificar la cantidad de espacio entre las columnas en las que se divide un texto dado usando la propiedad column-count.
Sintaxis:
column-gap: length|normal|initial|inherit;
Valor por defecto:
- normal
Valores de propiedad:
- longitud: este valor especifica la longitud que establecerá el espacio entre las columnas.
- normal : este es el valor predeterminado. Este valor se utiliza para especificar un espacio normal entre las columnas.
- initial : este valor se utiliza para establecer la propiedad column-gap en su valor predeterminado.
- heredar : este valor le dice a la propiedad column-gap que herede la propiedad de su padre.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>The column-gap Property</title>
<style>
.gfg {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px; /* Specifying Column Gap */
}
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h1>
The column-gap Property
</h1>
<p>
The column-gap property defines the gap
between the columns of the element:
</p>
<!-- The text inside below div tag is divided in
3 columns with a gap of 40px between
the columns -->
<div class="gfg">
The course is designed for students as well as
working professionals to prepare for coding
interviews. This course is going to have coding
questions from school level to the level
needed for product based companies like Amazon,
Microsoft, Adobe, etc.
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad column-gap se enumeran a continuación:
- Google Chrome 50.0, 4.0 -webkit-
- Internet Explorer 10.0
- Firefox 52.0, 2.0 -moz-
- Opera 9.0, 3.1 -webkit-
- Safari 37.0, 15.0 -webkit