Scopri come far rientrare il testo in html. Margini e bordi in CSS utilizzando i parametri margin, padding e border Padding HTML su tutti i lati

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

Ogni elemento, sia esso un paragrafo, un div, un'immagine o un video, è una specie di blocco in cui è possibile rientrare sia all'interno utilizzando la proprietà padding che all'esterno utilizzando il margin .

Queste proprietà per i rientri sono scritte in css in questo modo (si prende come esempio un paragrafo):

Invece del tag P, scrivi il tuo elemento, ovviamente, per il quale verranno applicati i rientri.

Assicurati di comprendere e ricordare che per i parametri di margine e riempimento, la costruzione dei rientri per ciascun lato è la stessa.
Cioè, abbiamo 4 valori in ogni trattino:

Valori di rientro.

• Primo valore: trattino dall'alto;
• Secondo valore: rientro a destra;
• Terzo valore: trattino dal basso;
• Quarto valore: rientranza a sinistra.

In questo esempio, ho creato il margine del margine in css in questo modo: ho scritto 20px in alto, 10px a sinistra ea destra (di regola sono gli stessi per la simmetria) e 30px in basso.

E per il padding, ho specificato il padding: 10px dall'alto, sinistra e destra e 14px dal basso.

Il valore per il riempimento nelle proprietà del margine e del riempimento può essere ridotto, a condizione che abbiano lo stesso importo.
Dal mio esempio, la notazione abbreviata sarà già simile a questa:

Cioè, quando non c'è l'ultima voce numerica, in questo caso per il rientro a sinistra, il browser sostituisce automaticamente lo stesso valore per il rientro a sinistra come il valore a destra.
E nel mio caso, i rientri a destra e a sinistra saranno 10px sia in margin che in padding .

E se hai gli stessi valori per i margini superiore e inferiore (ad esempio: 16px), e gli stessi valori per i margini sinistro e destro (ad esempio: 20px), la voce avrà un valore ancora più abbreviato modulo:

Di conseguenza, per il css indent, la voce è resa identica a questa.

Applicazione di trattini singoli: per ogni lato separatamente.

Le seguenti proprietà a valore singolo vengono utilizzate per specificare un singolo rientro:

Proprietà di imbottitura per ogni lato.

• margine superiore: 3px; rientro superiore esterno;
• margine sinistro: 4px; trattino sinistro esterno;
• margine-destra: 6px; rientro esterno destro;
• margine inferiore: 10px; margine inferiore esterno.

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

Ad esempio, hai tutti i rientri in CSS per tutte le immagini img.

Cioè (per chiarimento) il margine ha i seguenti valori: top 10px , left e right: 20px ciascuno e bottom 14px .
E l'imbottitura è di 6px su tutti e 4 i lati.

Diciamo che decidi di inserire un'altra immagine nella pagina, ma per essa vuoi cambiare solo il margine superiore e lasciare il resto come sono. E per portare a termine questo compito, è sufficiente registrare una classe per questa immagine e aggiungere una voce aggiuntiva al css.

Di conseguenza, l'immagine che hai aggiunto con la classe verx prenderà tutto il padding specificato nel css per il tag img e cambierà solo il padding esterno per il lato superiore (nel nostro caso: 40px ).

Ho provato a rendere più dettagliata la descrizione per i rientri CSS, ma se avete domande, chiedete loro attraverso i commenti.

Descrizione

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

Sintassi

margine-destra: valore | auto | ereditare

I valori

La quantità di riempimento destro può essere specificata in pixel (px), percentuali (%) o altre unità CSS accettabili. Il valore può essere positivo o negativo.

Auto Specifica che la dimensione del riempimento verrà calcolata automaticamente dal browser. inherit Eredita il valore del padre.

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 a oggetti

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

Browser

Internet Explorer 6 raddoppia il riempimento sinistro o destro per gli elementi mobili nidificati all'interno degli elementi padre. Il riempimento adiacente al lato del genitore viene raddoppiato. Il problema viene solitamente risolto aggiungendo display: inline all'elemento mobile.

Internet Explorer fino alla versione 7.0 non supporta il valore ereditario.

Una risorsa web viene valutata dagli utenti in base alla sua attrattiva esterna. Pertanto, anche il testo informativo utile potrebbe non essere letto a causa della scarsa qualità. Conclusione: è necessario avvicinarsi con attenzione e attenzione non solo al contenuto semantico delle pagine del sito, ma anche alla sua rappresentazione visiva. L'avvento della tecnologia CSS ha ampliato le possibilità di creare articoli accattivanti. Una proprietà progettata per facilitare la lettura della scrittura è il rientro del testo CSS.

Margini e padding: qual è la differenza?

Prima di iniziare a formattare il testo, dovresti capire cosa sono i margini e i rientri. Nonostante il fatto che questi elementi di markup in alcuni casi appaiano uguali all'utente, ci sono differenze fondamentali tra loro:

• il campo è impostato dalla proprietà imbottitura, trattino - margine;
• il margine è determinato dallo spazio tra il contenuto e il bordo del blocco, il rientro - tra i bordi dei blocchi vicini;
• I margini possono essere presi in considerazione nella dimensione dell'elemento (larghezza e altezza) o meno.

proprietà di margine

Quindi, per impostare il rientro orizzontale o verticale del testo CSS, usa la costruzione margine. Questa proprietà si applica al tag definire il paragrafo del documento. Nella sua forma più semplice, è scritto come:

margine: 12px

Questa riga significa che un blocco di testo (o qualsiasi altro blocco) verrà rientrato su tutti i lati di 12 pixel. Per aumentare l'intervallo, ad esempio, tre volte, è sufficiente scrivere:

margine: 36px

Ma cosa succede se la spaziatura tra i blocchi deve essere diversa su ciascun lato? Gli sviluppatori di pagine Web utilizzano diverse forme di notazione:

1. margine: 11px 22px.
2. margine: 11px 22px 33px.
3. margine: 11px 22px 33px 44px.

Nel primo esempio, 11 pixel verranno rientrati dai bordi inferiore e superiore del blocco e 22 pixel verranno rientrati dai lati del blocco. Secondo la seconda forma di scrittura, ci saranno 11 pixel tra il bordo superiore del blocco e il contenuto, 33 pixel tra il basso e 22 pixel ai lati. Nel terzo caso, il padding sarà di 11 pixel dall'alto, 22 pixel da destra, 33 pixel dal basso e 44 pixel da sinistra.

È anche possibile registrare la distanza dal confine del blocco solo su un lato: margine superiore, margine inferiore, margine sinistro, margine destro. Dopo aver tradotto i nomi delle proprietà in russo, è facile intuire il loro scopo. Ad esempio, la voce seguente dice che il riempimento corretto sarà di 22 pixel:

margine-destra: 22px

Per gli altri lati, le distanze attorno al blocco sono considerate uguali al valore dell'elemento padre.

Proprietà margine ha una caratteristica che lo sviluppatore dovrebbe tenere a mente quando utilizza il rientro verticale CSS. Gli intervalli degli elementi vicini non vengono sommati, ma sovrapposti l'uno all'altro. Ad esempio, lascia che uno dei blocchi abbia margine inferiore: 15px, e il blocco adiacente ad esso dal basso margine superiore: 35px. L'aritmetica scolastica e il buon senso impongono che il riempimento totale tra di loro sarà di 50 pixel. In pratica, questo non è il caso. Blocco con un grande valore immobiliare margine"assorbire" il suo vicino. Di conseguenza, la spaziatura tra gli elementi sarà di 35 pixel.

"Linea rossa

Quando si progetta un documento in un editor di testo, gli utenti preferiscono impostare ogni nuovo paragrafo utilizzando una linea "rossa". Con CSS, il rientro del testo a sinistra è facile da fare: viene utilizzata la costruzione indentatura del testo. Si scrive così:

rientro testo: 11px.

Cioè, la prima riga del paragrafo verrà spostata dal relativo bordo sinistro di 11 pixel. Per rendere il testo sulla pagina web più simile a un documento nell'editor, dovresti inoltre impostare, ovvero scrivere:

rientro testo: 11px;

text-align: giustifica.

Oltre ai pixel, quando si descrive il markup, è consentito utilizzare altre unità: pollici, punti, percentuali. Lascia che il blocco abbia un rientro del testo CSS del 10%. Con una larghezza del blocco di 500 pixel, la linea rossa sarà di 50 pixel (10% di 500).

Questa proprietà può essere impostata su ereditare. Tale record dice che il blocco utilizza una proprietà simile del blocco padre.

rientro testo: eredita.

Sorprendentemente, può assumere anche valori negativi! In questo caso si formano le cosiddette sporgenze, ovvero il testo principale rimane al suo posto e la prima riga viene spostata a sinistra di 22 pixel:

rientro testo: -22px.

Per evitare che le lettere vadano oltre il bordo sinistro del browser, oltre a indentatura del testoè necessario utilizzare la costruzione per impostare il campo:

riempimento a sinistra: 22px

Le principali proprietà CSS da considerare. E la pratica aiuterà a risolverli. Ecco alcuni suggerimenti finali su come applicare ciò che hai imparato allo sviluppo del tuo sito web:

• la linea rossa e il rientro del testo sono concetti diversi e vengono utilizzate proprietà diverse per specificarli;
• per i rientri verticali non si applicano le regole della matematica: gli intervalli sono sovrapposti, l'elemento con il valore più grande "vince";
• Un rientro di paragrafo negativo viene utilizzato per indicare la prima riga di un paragrafo con un'immagine.

In questo articolo vorrei dirvi come organizzare correttamente campi(imbottitura) e trattini(margine) nei CSS.

Ricordiamo innanzitutto la definizione di margini e padding secondo la specifica W3C. Nel modello box, i margini sono la distanza tra il contenuto e il bordo del box. E il riempimento è la distanza tra il bordo del blocco e il bordo dell'elemento adiacente o padre.

Pertanto, se il bordo e lo sfondo dell'elemento non sono impostati, non c'è differenza se utilizzare la proprietà padding o margin per impostare i rientri, ma a condizione che la larghezza (larghezza) e l'altezza (altezza) dell'elemento non siano impostato e l'algoritmo di calcolo della dimensione del contenuto non viene modificato utilizzando le proprietà di ridimensionamento della scatola.

In ogni caso, tieni presente che i margini possono o meno essere inclusi nella larghezza o nell'altezza dell'elemento. I rientri sono sempre impostati all'esterno dell'elemento.

Ora diamo un'occhiata a come disporre correttamente margini e rientri tra gli elementi. Prendiamo come esempio il seguente blocco.

Questo è il blocco delle notizie. Consiste in un titolo, un elenco di notizie e un collegamento "Altre notizie". Diamo loro i seguenti nomi di classe: news_title , news__list e news__more-link .

Poiché ciascuno di questi elementi ha la stessa spaziatura interna sinistra e destra, è meglio impostare i margini sulla casella padre piuttosto che impostare la spaziatura interna sinistra e destra per ciascun elemento individualmente.

Novità ( imbottitura: 20px 25px; )

Pertanto, se necessario, modificare il valore dei campi a destra e a sinistra, sarà necessario farlo In un posto. E quando aggiungi un nuovo elemento all'interno del blocco delle notizie, avrà già i rientri necessari a sinistra e a destra.

Capita spesso che tutti gli elementi all'interno di un blocco abbiano lo stesso riempimento a sinistra ea destra, tranne uno, che non dovrebbe avere alcun riempimento, ad esempio a causa dello sfondo. In questo caso, è possibile impostare un riempimento negativo per l'elemento. Quindi non è necessario rimuovere i margini all'interno del blocco per il resto degli elementi.

Ora devi impostare i rientri verticali tra gli elementi. Per fare ciò, è necessario determinare quale degli elementi è obbligatorio. Ovviamente un blocco news non può esistere senza un elenco di notizie, mentre allo stesso tempo potrebbe non esserci un link "Altre notizie", il titolo può anche essere rimosso, ad esempio, quando si cambia il design.

Con questo in mente, impostiamo il rientro dal basso per il titolo e il rientro dall'alto per il collegamento "Altre notizie".

News__title ( margine inferiore: 10px; ) .news__more-link ( margine superiore: 12px; )

Potremmo ottenere lo stesso risultato esterno aggiungendo il riempimento nella parte superiore e inferiore dell'elenco delle notizie.

News__list (margine: 10px 0 12px 0; )

Ora è necessario impostare i rientri tra le singole notizie. Ancora una volta, è necessario tenere conto del fatto che il numero di notizie può cambiare e che può esserci solo una voce nell'elenco.

È possibile impostare per ogni notizia tranne il primo trattino dall'alto, oppure per ogni notizia eccetto l'ultimo trattino dal basso. La prima opzione è preferita perché lo pseudo-selettore :first-child è stato aggiunto nella specifica CSS 2.1 e ha un supporto più ampio, al contrario dello pseudo-selettore :last-child, che è stato aggiunto solo nella specifica CSS versione 3.0.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

Pertanto, la corretta disposizione di margini e rientri consente di modificare in modo flessibile l'aspetto di qualsiasi blocco senza apportare modifiche agli stili e senza violare il design. La cosa più importante è determinare quali elementi del blocco sono i principali ( obbligatorio), e che opzionale.

A volte non possiamo fare affidamento sugli elementi richiesti. Ad esempio, abbiamo una finestra popup che può visualizzare alcuni titoli e testo all'interno. Inoltre, in alcuni casi potrebbe non esserci testo e in alcuni casi potrebbe non esserci un'intestazione. Cioè, entrambi gli elementi sono opzionali.

In questo caso, puoi utilizzare il seguente metodo per impostare i rientri.

Popup__header + .popup__text ( margine superiore: 15px; )

Quindi il rientro apparirà solo se vengono utilizzati entrambi gli elementi. Nel caso in cui venga visualizzato solo il titolo o solo il testo, non ci sarà alcun rientro aggiuntivo.

Margini verticali collassanti

Un'altra sfumatura che non tutti conoscono è legata ai rientri verticali tra blocchi adiacenti. Nella definizione di indentazione che ho dato sopra, si dice che l'indentazione è la distanza tra frontiere blocco attuale e limitrofo. Quindi, se posizioniamo due caselle una sotto l'altra e diamo a una di esse un riempimento inferiore di 30px e all'altra un riempimento superiore di 20px, il riempimento tra di loro non sarà 50px , ma 30px .

Cioè, i rientri si sovrapporranno e il rientro tra i blocchi sarà uguale al rientro più grande e non alla somma dei rientri. Questo effetto è anche chiamato "collasso".

Si noti che i rientri orizzontali, a differenza di quelli verticali, non "collassano", ma sono sommati. Vengono anche riepilogati i campi (padding).

Conoscendo il "collasso" dei rientri, possiamo utilizzare questa funzione a nostro vantaggio. Ad esempio, se dobbiamo impostare rientri per intestazioni e testo all'interno di un articolo, per l'intestazione di primo livello imposteremo il rientro dal basso a 20px e per l'intestazione di secondo livello il rientro dall'alto è 20px e da sotto 10px , e per tutti i paragrafi imposteremo il rientro dall'alto a 10px .

h1 (margine-basso: 24px; ) h2 (margine-alto: 24px; margine-basso: 12px; ) p (margine-alto: 12px; )

Ora l'intestazione h2 può essere posizionata sia dopo l'intestazione h1 che dopo il paragrafo. In ogni caso, il padding superiore non supererà i 24px.

Regole generali

Riassumendo, vorrei elencare le regole che seguo quando organizzo margini e rientri.

1. Se gli elementi adiacenti hanno lo stesso riempimento, è meglio impostarli sul contenitore padre e non sugli elementi.
2. Quando imposti i rientri tra gli elementi, dovresti considerare se questo elemento è obbligatorio o facoltativo.
3. Per un elenco di elementi dello stesso tipo, non dimenticare che il numero di elementi può variare.
4. Prestare attenzione all'applicazione del riempimento verticale e utilizzare questa funzione dove sarà utile.

Il layout CSS è sempre stato rettangolare. Eventuali linee morbide sono di competenza dello sviluppatore. Le regole di stile forniscono opzioni sufficienti per dare alla pagina forme morbide all'interno della risoluzione dello schermo. Ma qualsiasi elemento di layout è sempre un rettangolo in cui la posizione delle informazioni è regolata dalle regole CSS.

Il riempimento completo è importante per ogni elemento di una pagina quando è posizionato in modo assoluto e il riempimento superiore è definito in modo specifico nei CSS perché è importante per una varietà di elementi, in particolare gli elementi inline.

Regole di posizionamento di base

Un elemento di blocco ha una regola di riempimento dai lati dell'elemento in cui si trova (margine), una regola di riempimento per gli elementi al suo interno (padding) e una larghezza del bordo (bordo) che può anche essere utilizzata.

Di particolare importanza è la rientranza in alto. CSS all'interno di un blocco mette in relazione le regole di riempimento con le regole per elementi posizionati in modo assoluto e relativamente all'interno di quel blocco.

La pratica abituale delle regole CSS: puoi specificare il padding su tutti i lati allo stesso modo, a coppie alto/basso e destra/sinistra, o separatamente per ciascun lato. Per esempio,

• margine: 10px
• imbottitura: 10px20px
• imbottitura: 10px20px30px40px.

Nel primo caso è incastonata la rientranza dell'elemento dai lati del contenitore esterno in cui si trova. Nel secondo caso, i rientri superiore e inferiore sono 10px, sinistro e destro - 20px. Nel terzo caso sono indicate le dimensioni dei rientri su tutti i lati: in alto, a destra, in basso e a sinistra.

In tutti questi casi, il trattino il CSS superiore è 10 px.

Regole che cambiano la posizione degli elementi

Se l'elemento di layout non è posizionato in modo assoluto, si trova nell'ordine generale della pagina.

Se definiamo rientra dalla parte superiore del CSS nell'elemento scCurrInfo, l'obiettivo verrà raggiunto e, se a livello li, non lo farà.

In questo esempio, utilizzando il riempimento: 40px; richiede un'adeguata riduzione delle regole di larghezza e altezza di 80px. In caso contrario, la dimensione del blocco scCurrInfo si estenderà oltre i limiti del blocco esterno.

Se rimuoviamo la regola di riempimento dalla descrizione scCurrInfo, ma la aggiungiamo con un valore di 20px alla descrizione dello stile dell'elemento dell'elenco, otteniamo solo trattino superiore. CSS non applicherà questo valore ad altre parti.

Naturalmente, questo uso della regola di indentazione si applica a ciascun elemento li.

Pratica generale per la formattazione dei contenuti

Alcuni sviluppatori ottengono la perfezione disponendo le pagine con elementi a blocchi. Apparentemente, questa è una pratica classica: iniziare con le tabelle e finire il tuo processo educativo sui blocchi.

La libertà insita nel layout dei blocchi è affascinante e l'immaginazione dello sviluppatore potrebbe non essere limitata da rigide regole tabulari: solo righe, solo celle, che si uniscono solo orizzontalmente e verticalmente. Niente di peculiare delle idee relazionali.

Nel frattempo, le tabelle, oltre alle evidenti carenze, presentano molti vantaggi qualitativi. Quando si creano rientri dall'alto, CSS tiene conto dei rientri a sinistra, a destra (in basso è un momento speciale). Le regole delle celle della tabella consentono di controllare l'allineamento sia verticalmente che orizzontalmente. Usando gli stili di riga, combinati con gli stili di cella, puoi creare viste complesse del contenuto.

La consueta rappresentazione della pagina sotto forma di rettangoli non impedisce affatto che venga presentata sotto forma di tabella. Anche questi sono rettangoli, ma sono anche celle di tabella, ovvero hanno le proprie regole che completano le regole di blocco.

Posizionamento assoluto

Blocco con regola POSIZIONE: assoluta ; si troverà nel luogo stabilito dalle sue coordinate relative al blocco in cui si trova.

Una caratteristica delle regole CSS è "la pratica è il miglior criterio di verità" nella maggior parte dei casi, specialmente quando è richiesta la compatibilità cross-browser e il layout è fatto manualmente, è preferibile studiare manuali completi su fogli di stile a cascata.

L'uso delle tabelle porta spesso a problemi di spostamento delle celle. Un offset simile all'interno di un blocco non ha sempre effetto su tutti gli elementi. Sperimentando, puoi ottenere il risultato desiderato. Un compito banale: come rimuovi il padding superiore, i CSS non lo risolvono sempre in modo banale.

In alcuni casi, quando devi comporre elementi di pagina nelle profondità di alcuni popolari sistemi di gestione dei contenuti del sito, devi comunque prestare attenzione non solo alla pratica sperimentale, ma anche all'esperienza dei colleghi.