Чтобы объединить гуттеры двух "col-6" блоков в CSS, можно использовать псевдоэлемент ::after и задать отрицательные значения отступов для первого и второго блоков. Это позволит создать эффект объединения гуттеров и отобразить блоки визуально как один большой блок.
Для начала, предполагается, что у вас уже есть HTML-разметка, в которой два блока имеют класс "col-6". Класс "col-6" обычно используется для создания блоков, занимающих 50% ширины родительского контейнера.
В CSS, следующий код может быть использован для объединения гуттеров двух "col-6" блоков:
.col-6 {
width: 50%;
float: left;
box-sizing: border-box;
}
.col-6 + .col-6 {
margin-left: 20px; /* Расстояние между блоками */
}
.col-6::after {
content: "";
display: table;
clear: both;
}
.container {
width: 100%; /* Ширина родительского контейнера */
overflow: hidden; /* Предотвращает выход элементов из контейнера */
}
В приведенном выше коде класс "col-6" задает ширину блока в 50%, "float:left" позволяет блокам выстраиваться горизонтально. "box-sizing: border-box" осуществляет расчет размеров блока, включая отступы и границы.
Правило ".col-6 + .col-6" добавляет отступ между двумя соседними блоками, чтобы создать гуттеры.
Псевдоэлемент "::after" добавляет себя после содержимого блока и используется для "очистки" элемента и предотвращения обтекания другими элементами.
Для применения эффекта объединения гуттеров, за пределами блоков, предполагается наличие родительского контейнера с классом "container". В примере выше, ширина родительского контейнера установлена на 100% и "overflow:hidden" предотвращает выход блоков за его пределы.
Теперь, после применения указанных CSS-стилей, два "col-6" блока будут отображаться рядом друг с другом с отступом между ними, создавая визуальный эффект объединения гуттеров.