En este artículo, aprenderemos cómo establecer la longitud que establecerá el espacio entre las columnas.
Enfoque: la propiedad column-gap se usa para especificar la longitud que establecerá el espacio entre las columnas. Eso toma un valor para corregir un espacio específico entre columnas.
Sintaxis:
column-gap: value;
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg {
font-size: 30px;
column-count: 3;
column-gap: 50px;
}
</style>
</head>
<body>
<div class="parent" style="width: 50%;">
<div class="gfg">
GeeksforGeeks is my favorite site where
I can gain a lot of knowledge and can
also share my knowledge what I have gained
while learning. We can add more
paragraphs for content. This is just an
example to tell you how to specify
the optimal width for the columns in CSS?
The column width is 160px in this example.
</div>
</div>
</body>
</html>
Producción:
Antes de aplicar la propiedad:
Después de aplicar la propiedad:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg {
font-size: 30px;
column-count: 3;
column-gap: 50px;
column-rule: 5px dotted blue;
}
</style>
</head>
<body>
<div class="parent" style="width: 50%;">
<div class="gfg">
GeeksforGeeks is my favorite site where
I can gain a lot of knowledge and can
also share my knowledge what I have
gained while learning. We can add more
paragraphs for content. This is just an
example to tell you how to specify
the optimal width for the columns in CSS?
The column width is 160px in this example.
</div>
</div>
</body>
</html>
Producción:
Antes de aplicar la propiedad:
Después de aplicar la propiedad:
Publicación traducida automáticamente
Artículo escrito por manikumarsingh789 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA