Come creare un rientro sporgente con i CSS. Un elemento a livello di blocco HTML come un paragrafo può essere designato con un rientro sporgente. L'elemento che si sta styling deve contenere più di una linea. Di seguito viene spiegato come creare un rientro sporgente con i CSS.

istruzione

1 Creare il rientro sporgente utilizzando la proprietà text-trattino, combinata con padding-left. E 'meglio assegnare la regola CSS per il paragrafo o altro elemento utilizzando una classe. Ecco un esempio di classe denominata appeso-trattino:

.hanging-trattino {
text-trattino: -25px;
padding-left: 25px;
}

2 Si noti che la quantità effettiva di text-trattino è dato come un numero negativo; in questo caso è -25px. Poi viene data una seconda regola per padding-left; in questo caso è 25px. Questi due valori non devono corrispondere. L'unica cosa che devi fare è utilizzare un numero negativo per il testo-rientro e un valore positivo per padding-left.

3 I paragrafi nella barra laterale sul lato destro della pagina nell'immagine mostrano l'effetto. Ogni paragrafo nella barra laterale destra è assegnata alla classe sopra indicato: .hanging-trattino.

4 Se è stato aggiunto un bordo alla regola, il confine sarebbe circondare l'intero elemento a livello di blocco (vedi immagine).