Come regolare la distanza tra i paragrafi in CSS

March 1

CSS, acronimo di Cascading Style Sheets, permette agli sviluppatori di personalizzare l'aspetto di qualsiasi elemento in una pagina Web. siti Web che utilizzano i CSS sono più facili da mantenere, perché modifiche a una definizione CSS possono aggiornare gli stili di tutti gli elementi di una pagina Web. Per esempio, modificando un singolo valore CSS, è possibile regolare la distanza tra gli elementi di paragrafo HTML. Ciò consente di ottimizzare il vostro disegno in modo rapido e vedere immediatamente i risultati senza modificare il codice HTML subalterno.

istruzione

1 Notepad lancio o un editor HTML. Aprire una delle tue pagine web che ha più paragrafi.

2 Aggiungere il seguente blocco di codice CSS per la sezione "testa" del documento.

<Style>
p {margin-bottom: 100px}
</ Style>

Questo crea una classe CSS che controlla gli attributi di tutti i paragrafi nella pagina Web. La proprietà "margin-bottom" determina la quantità di spazio vuoto che appare nella parte inferiore di un paragrafo. In questo esempio, tale valore è 100 pixel.

3 Salvare il documento e aprirlo nel browser. Si vedrà un ampio divario tra i paragrafi, perché i paragrafi hanno un grande valore per le loro proprietà "margin-bottom".

4 Rientro in classe CSS nel documento HTML. Change "100px" a "10px" e salvare il documento.

5 Tornare al browser e premere il tasto "F5" per aggiornare la pagina Web. Si noti che la distanza tra i paragrafi è diminuita perché è stata modificata la proprietà "margin-bottom" da 100 pixel a 10 pixel.

Consigli e avvertenze

  • È inoltre possibile utilizzare i valori negativi, come ad esempio "-20px" per portare punti ancora di più insieme. Se si effettua il valore abbastanza piccolo, entrambi i paragrafi occuperanno la stessa linea nella pagina Web.