Come posso modificare la spaziatura tra i paragrafi di testo?

Quando si usa il tag

I rientri vengono aggiunti automaticamente nella parte superiore e inferiore del paragrafo di testo. Questo viene fatto per separare visivamente un blocco di testo dal successivo. È chiaro che i valori di rientro predefiniti non sono sempre soddisfacenti, quindi a volte devono essere diminuiti o aumentati. Per fare ciò, puoi utilizzare il margine di proprietà universale, che definisce i rientri su tutti i lati del paragrafo, o margin-top per il rientro superiore e margin-bottom per il rientro inferiore.

Descrizione

Imposta la quantità di riempimento dal bordo destro dell'elemento. Il padding è la distanza dal bordo esterno del bordo destro dell'elemento corrente al bordo interno del suo elemento genitore (Figura 1).

Sintassi

margine destro: valore | auto | ereditare

I valori

La quantità del padding corretto può essere specificata in pixel (px), percentuale (%) o altre unità accettabili per CSS. Il valore può essere positivo o negativo.

Auto Indica che la dimensione dei rientri verrà calcolata automaticamente dal browser. inherit Eredita il valore dal genitore.

HTML5 CSS2.1 IE Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. 2.

Riso. 2. Applicazione della proprietà margin-right

Modello oggetto

document.getElementById ("elementID") .style.marginRight

Browser

Internet Explorer 6 raddoppia il valore di riempimento sinistro o destro per gli elementi float nidificati all'interno di elementi padre. L'imbottitura che è adiacente al lato del genitore è raddoppiata. Il problema viene solitamente risolto aggiungendo display: inline all'elemento float.

Internet Explorer fino alla versione 7.0 inclusa non supporta il valore ereditato.

Per una visualizzazione più bella degli elementi su una pagina Web, vengono utilizzati i rientri esterni e interni in css e ora lo analizzeremo con esempi.

Ogni elemento, che sia un paragrafo, un div, un'immagine o un video, è un blocco in cui è possibile indentare sia l'interno con la proprietà padding che l'esterno con il margine.

In css, queste proprietà sono scritte per il rientro in questo modo (ad esempio, viene preso un paragrafo):

Invece del tag P, scrivi il tuo elemento, ovviamente, per il quale verrà applicato il rientro.

È indispensabile comprendere e ricordare che per i parametri di margine e imbottitura, la costruzione dei rientri per ciascun lato è la stessa.
Cioè, abbiamo 4 valori in ogni rientro:

Valori di rientro.

• Primo significato: rientro superiore;
• Secondo significato: trattino a destra;
• Terzo significato: margine inferiore;
• Quarto significato: rientro sinistro.

In questo esempio, ho creato un margine esterno in css in questo modo: ho scritto 20px in alto, 10px a sinistra e a destra (di regola sono uguali per la simmetria), e in basso ho indicato 30px.

E per l'imbottitura dell'imbottitura interna, ho specificato: 10px in alto, sinistra e destra e 14px in basso.

Il valore per il padding nelle proprietà margin e padding può essere ridotto, a condizione che siano della stessa dimensione.
Dal mio esempio, la notazione abbreviata sarà già simile a questa:

Cioè, quando manca l'ultima voce numerica, in questo caso per il rientro sinistro, il browser sostituisce automaticamente al rientro sinistro lo stesso valore del valore destro.
E nel mio caso, i rientri a destra e a sinistra saranno di 10 px ciascuno, che è in margine, che è in padding.

E se hai gli stessi valori per i margini esterni in alto e in basso (ad esempio: 16px) e anche gli stessi valori per i margini esterni a sinistra e a destra (ad esempio: 20px), allora il record avrà una forma ancora più abbreviata:

Di conseguenza, per il rientro css interno, la voce è identica a questa.

Applicazione di trattini singoli: per ogni lato separatamente.

Le seguenti proprietà a valore singolo si applicano per specificare un rientro separato:

Proprietà di imbottitura per ogni lato.

• margine superiore: 3px; imbottitura superiore esterna;
• margine sinistro: 4px; imbottitura esterna sinistra;
• margine destro: 6px; margine destro esterno;
• margine inferiore: 10px; imbottitura inferiore esterna.

Allo stesso modo, le voci vengono scritte per i rientri interni, solo tu devi sostituire il margine con il padding.

Ad esempio, hai già tutti i rientri in css per tutte le immagini img.

Cioè (per chiarezza) il padding esterno ha i seguenti valori: 10px in alto, sinistra e destra: 20px ciascuno e 14px in basso.
E l'imbottitura è 6px su tutti e 4 i lati.

Diciamo che hai deciso di mettere un'altra immagine sulla pagina, ma per essa vuoi solo cambiare il margine esterno in alto e lasciare il resto così com'è. E per svolgere questo compito, è sufficiente scrivere una classe per questa immagine e aggiungere una voce aggiuntiva al css.

Di conseguenza, l'immagine che hai aggiunto con la classe verx accetterà tutti i rientri specificati nel css per il tag img e cambierà solo il margine per il lato superiore (nel nostro caso: 40px).

Ho provato a rendere la descrizione per i rientri css in modo più dettagliato, ma se hai domande, chiedile attraverso i commenti.

Ciao! Inizialmente volevo dividere questo articolo in 4 piccoli, ma poi ci ho pensato. Per che cosa? Dopotutto, è più conveniente quando tali informazioni vengono raccolte nell'ambito di un materiale.

Pertanto, oggi impareremo come indentare CSS da sinistra e da tutti gli altri lati: a destra, in alto e in basso. Si possono fare per immagini e testi. Sono di due tipi:

• Esterno;
• Interno.

Per il primo viene utilizzato il margine della proprietà chiave, per il secondo il padding. Per chiarezza, ho fatto un piccolo esempio per te. Per rendere visivamente comoda la distinzione tra spazio interno ed esterno, ho aggiunto un tavolo visibile. Vediamo cosa è successo?

Imbottitura esterna

Scrivendoli nel foglio di stile CSS, puoi impostare l'orientamento del blocco di informazioni sulla pagina. Ad esempio, spostalo verso sinistra e verso il basso. Dimostriamo immediatamente come apparirà.

In generale, puoi utilizzare le opzioni seguenti per impostare i rientri.

Sinistra (margine sinistro).

Destra (margine-destra).

In alto (margine in alto).

In basso (margine-basso).

Ora ti mostrerò un'altra bella sfumatura.

Come puoi vedere, puoi usare una delle opzioni: l'effetto è lo stesso. Solo nel secondo caso il codice è più compatto. Si noti inoltre che l'imbottitura è in senso orario. Tutto inizia in alto e finisce a sinistra.

Imbottitura interna

La procedura è simile qui. Solo ora aggiungerò nuove proprietà non per l'intera tabella, ma per il contenuto delle colonne.

Vediamo cosa ne è venuto fuori.

Per analogia con i margini interni nei CSS, i margini esterni possono essere scritti in codice abbreviato o per i lati separatamente.

Questi erano i punti salienti. Infine, ti mostrerò come puoi semplificare parte del lavoro.

Rientro a livello dei tag selezionati

Nei casi che abbiamo esaminato sopra, sono impostati per testo e immagini contemporaneamente. In effetti, puoi impostare la distanza dagli elementi a livello di un tag specifico. Ti mostrerò come funziona. Annulla le ultime modifiche e inserisci il codice personalizzato nel foglio di stile.

Diamo un'occhiata a cosa è successo dopo aver salvato le modifiche.

L'immagine è rimasta al suo posto, solo il testo racchiuso a sinistra si è spostato. Manipolazioni simili possono essere applicate ad altri blocchi, ad esempio tr, span.

Come informazione aggiuntiva, propongo una pubblicazione sull'incarico per la revisione. Lì sono descritti anche metodi piuttosto interessanti. Può essere utile per formare una linea rossa nel testo o per eseguire altre azioni.

Inoltre, c'è un abbonamento alla distribuzione gratuita di informazioni agli indirizzi e-mail. C'è un modulo speciale per iscriversi al blog. Fino alla prossima volta.

La proprietà determina la quantità di spazio di testo orizzontale da disporre prima dell'inizio della prima riga dell'elemento di testo. La spaziatura viene calcolata dall'inizio dal bordo dell'elemento e dal contenitore per il livello del blocco.

Poiché la maggior parte del contenuto di una pagina web è presentata sotto forma di testo, la capacità di dare uno stile a quel testo sia attraente che efficace è un'abilità importante che può diventare un web designer. Il metodo più comunemente usato e consigliato per far rientrare la descrizione e il paragrafo è usare i CSS. Qui ti verranno forniti vari esempi di come i CSS possono essere usati per il testo e l'elemento di indentazione.

Imposta il riempimento superiore in CSS

Per creare i margini superiori, non possiamo certo fare a meno delle proprietà CSS, quindi abbiamo bisogno di margin-top, questo valore può essere impostato in diversi modi, sia in px che standard su pixel, em,% e così via, che tutto accade nella stilistica CSS nelle unità di misura.

Esempio di utilizzo:

Blocco margine (
margine superiore: 50 px;
}

Cosa puoi guardare nell'immagine:

Puoi anche usarlo per rilasciare blocchi, quindi qui puoi usare una proprietà chiamata margine sinistro anche margine-destro e margine inferiore... Dove indichiamo semplicemente la proprietà margin, dove è possibile impostare inizialmente 4 parametri per essa, qui considereremo in senso orario per il concetto, dove iniziamo dal lato superiore e proseguiamo sotto ciascun lato.

margine: 20px 50px 30px 50px;

Ha anche un'imbottitura in cima in CSS

Succede che devi allineare verticalmente un elemento di contenuto, questo è relativo al blocco genitore, qui è possibile utilizzare altre proprietà, come padding-top, che fa, o meglio, per impostazione predefinita, imposta il padding verso l'alto. Se parliamo di proprietà simili, che possono anche essere scritte e impostate per analogia, ecco il margine in px, em,% e altre unità.

Esempio:

Imbottitura (
imbottitura: 47px;
}

Ora possiamo considerare un analogo della proprietà margine e imbottitura, che viene utilizzato per impostare i rientri sugli altri lati dell'elemento di blocco, ma va già separatamente: imbottitura-sinistra, padding-right, imbottitura-fondo... Dove puoi impostare immediatamente la distanza di cui hai bisogno, solo per tutti i lati, e tutto sarà allo stesso tempo.

imbottitura: 10px 20px 40px 50px;

Qui puoi inizialmente impostare il valore come per margine partendo come capisci dall'alto, ma poi tutto va in senso orario, è a destra, in basso, a sinistra, e così via.

Ora, a seconda della diversa situazione, hai l'opportunità di creare rientri sopra gli stili CSS, dove usiamo le proprietà margine e imbottitura che è possibile visualizzare gli elementi necessari sulla pagina della tua risorsa Internet, come hai concepito e devi fare.