Sintassi

Significato dei valori principali:

• length: un valore di lunghezza che definisce la distanza tra il bordo della forma ritagliata e il contenuto circostante. Può essere espresso in unità di misura come px, em, rem, ecc.

Considerazioni:
La proprietà shape-margin è estremamente utile per migliorare la presentazione visiva dei contenuti ritagliati, permettendo di aggiungere un margine personalizzato attorno alla forma creata con clip-path. Questo margine non influisce sul contenuto originale, ma sposta visivamente la forma lontano dal bordo del contenitore, creando un effetto di distacco. Può essere particolarmente utile per ottenere un aspetto più pulito e meno affollato quando si lavora con forme complesse o immagini ritagliate.

Nota: la proprietà shape-margin ha effetto solo se l’elemento ha float diverso da none.

Esempio proprietà: shape-margin

Codice Esempio: shape-margin

CODE: CSS

1. .shape-margin-example {

2.   float: left;

3.   width: 200px;

4.   height: 200px;

5.   margin: 20px;

6.   background-image: url('https://placehold.co/200x200/ff0000/FFFFFF/png');

7.   background-size: cover;

8.   shape-outside: circle(50%);

9.   clip-path: circle(50%); /* Ritaglia l'immagine in una forma circolare */

10.   shape-margin: 10px; /* Aggiunge uno spazio di 10px intorno alla forma */

11. }

Contenuto Esempio: shape-margin

  
  <style>
    .shape-margin-example {
      width: 300px;
      height: 300px;
      margin: 20px;
      background-image: url('https://placehold.co/200x200/ff0000/FFFFFF/png');
      background-size: cover;
      shape-outside: circle(50%);
      clip-path: circle(50%); /* Ritaglia l'immagine in una forma circolare */
      shape-margin: 10px; /* Aggiunge uno spazio di 10px intorno alla forma */
    }
  </style>
  
  <div class="shape-margin-example">Testo ......</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