CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS gap

La proprietà CSS3 gap definisce lo spazio tra gli elementi in Flex e Grid

La proprietà gap è utilizzata nei layout flex e grid per controllare lo spazio interno tra le righe e le colonne. È più leggibile e manutenibile rispetto all'uso dei margin sui singoli elementi.

Sintassi

gap: lunghezza | riga lunghezza colonna lunghezza;

Significato dei valori principali:

  • valore singolo (es. 20px): applica la stessa distanza tra righe e colonne.

  • due valori (es. 10px 30px): il primo valore è lo spazio tra righe, il secondo lo spazio tra colonne.


Esempio proprietà: gap


Codice Esempio: gap

CODE: CSSpreleva codice
  1. .gap-example {
  2.   display: grid;
  3.   grid-template-columns: repeat(3, 100px);
  4.   gap: 15px 30px; /* Riga, Colonna */
  5.   background-color: #eee;
  6.   padding: 20px;
  7. }
  8.  
  9. .gap-item {
  10.   background-color: #50a14f;
  11.   color: white;
  12.   text-align: center;
  13.   padding: 20px;
  14.   border-radius: 5px;
  15.   font-size: 16px;
  16. }

Contenuto Esempio: gap

Esempio di utilizzo di gap

In questo esempio, la proprietà gap crea spazio tra gli elementi di un contenitore grid:


1
2
3
4
5
6

CSS e HTML per l'esempio con gap:

  
  <style>
    .gap-example {
      display: grid;
      grid-template-columns: repeat(2, 100px);
      gap: 15px 30px; /* 15px tra le righe, 30px tra le colonne */
      background-color: #eee;
      padding: 20px;
    }

    .gap-item {
      background-color: #50a14f;
      color: white;
      text-align: center;
      padding: 20px;
      border-radius: 5px;
      font-size: 16px;
    }
  </style>

  <div class="gap-example">
    <div class="gap-item">1</div>
    <div class="gap-item">2</div>
    <div class="gap-item">3</div>
    <div class="gap-item">4</div>
    <div class="gap-item">5</div>
    <div class="gap-item">6</div>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies