Differenza del margine di riempimento CSS. Margine o imbottitura? Pensando a cosa e dove usare

Ciao cari lettori del sito blog. Oggi voglio continuare l'argomento di studio e considerare quelle regole di stile che permettono di impostare padding e bordi per gli elementi Html: border, margin e padding.

Prima di ciò, siamo riusciti a studiare proprietà piuttosto semplici che controllavano i caratteri (), il testo () e consideravano il modello

Sì, siamo anche riusciti a considerare i principi di utilizzo in tutti i dettagli (stesi su diversi articoli). Ora è il momento di passare alle regole che costituiscono la base per la costruzione dei documenti (pagine web), e inizieremo con il modello a blocchi (la relazione degli elementi Html).

In termini generali, ho già scritto sul moderno, beh, ma oggi ci saranno puri dettagli. Se desideri leggere pubblicazioni precedenti sull'argomento, sei il benvenuto.

Modello box CSS - padding, margin e border

Terzo, gli interessi possono essere utilizzati. Da cosa vengono contati? Si scopre che dalla larghezza del contenitore(ovvero, dall'area del contenuto dell'elemento genitore). Inoltre, questo vale non solo per il margine destro e sinistro, il che sarebbe logico, ma per il margine superiore e inferiore le percentuali verranno calcolate esattamente dalla larghezza (non dall'altezza) del contenitore.

Va notato, parlando di impostazione dei valori dimensionali, che Margin può essere anche negativo... Quelli. quando si specifica un valore positivo per il padding esterno, spostiamo l'elemento adiacente della distanza specificata e se viene specificato un valore negativo, il blocco adiacente andrà semplicemente a quello per cui impostiamo questo padding negativo. E questo è usato molto spesso nei CSS.

Ebbene, va da sé che esiste una regola CSS Margin composita, che in molti casi permette di ridurre la dimensione del codice utilizzato per impostare i margini richiesti. L'ordine dei valori in esso è strettamente regolato (sono scritti attraverso uno spazio) e deve corrispondere allo schema:

Quelli. l'enumerazione inizia dall'alto e continua senso orario fino alla fine del cerchio. Potrebbe assomigliare a questo:

Margine: 20px 10px 40px 30px;

E questo significa che il browser deve indentare 20 pixel sopra il nostro blocco, 10 pixel a destra, 40 pixel dal basso e 30 pixel a sinistra. questa voce sarà equivalente a questa:

La riduzione del codice CSS è visibile ad occhio nudo. Ma questo non è il limite. È perfettamente accettabile utilizzare non solo quattro, ma anche tre, due e persino un solo valore in una regola composta. Ciò contribuirà ulteriormente a ridurre la dimensione del codice. Tuttavia, sarà possibile ridurre il numero di valori solo in alcuni casi:

1. Se i margini a sinistra ea destra sono gli stessi, ad esempio, in questo modo: margin: 20px 30px 40px 30px;

   Quest'ultimo può essere omesso:

   Margine: 20px 30px 40px;

   Queste due voci di regole collettive fanno la stessa cosa. Pertanto, se vedi un record con tre valori in Margine, il valore del quarto (a destra) può essere visto nel secondo (a sinistra).

   In caso di margini uguali sopra e sotto, questo trucco non funzionerà più, perché logicamente è possibile ridurre la struttura del record della regola collettiva, solo tagliando i valori duplicati dalla sua fine(e il valore del margine inferiore sarà il penultimo).

2. Se, oltre all'uguaglianza dei margini esterni a sinistra e a destra, c'è un'uguaglianza dei loro valori in alto e in basso: margine: 20px 30px 20px 30px;

   o, che è lo stesso (in virtù della clausola 1):

   Margine: 20px 30px 20px;

   Tale regola collettiva può essere scritta con due soli valori, scartando l'ultimo, che coincide con il primo:

   Margine: 20px 30px; In questo caso, il primo valore descrive i margini verticali, mentre il secondo descrive i margini orizzontali.

3. E infine, se tutti i valori nella regola prefabbricata sono gli stessi: margine: 20px 20px 20px 20px;

   o, che è lo stesso (in virtù della clausola 2):

   Margine: 20px 20px;

   Allora puoi usare tipo di record accorciato al massimo(scartando l'ultimo valore che corrisponde al primo):

   Margine: 20 pixel; Il che significherà lo stesso margine su tutti i lati del nostro elemento HTML.

A proposito di margini, vale la pena menzionare uno schema come "Margine colloapse" o, in altre parole, “collasso di margini”. In poche parole, l'essenza di questo fenomeno è la seguente.

Se abbiamo due blocchi posizionati uno sotto l'altro (i crolli del margine possono verificarsi solo verticalmente) ed entrambi hanno margini opposti (ad esempio, il fondo per l'elemento in alto e il margine in alto per il fondo), allora un valore di Margine più grande sarà assorbirne uno più piccolo.

Ad esempio, se il blocco superiore è impostato come segue:

Margine: 20px 20px 200px 20px;

E per quello in basso:

Margine: 100 px 20 px 20 px 20 px;

Quindi il margine inferiore del blocco superiore (200 px) assorbirà il margine superiore di quello inferiore (100 px e anche se diventa 199 px, non cambierà nulla) e il margine esterno risultante tra questi due blocchi sarà comunque di 200 px. Quelli. solo il più grande modulo Margin, e non si somma in alcun modo con il valore opposto dell'elemento verticalmente adiacente.

Tale è l'intoppo, che funziona esclusivamente verticalmente e orizzontalmente le dimensioni opposte del margine si sommano semplicemente l'una all'altra. Ma questo è solo per quanto riguarda i margini con lo stesso segno, ma se sono con segni diversi, i loro numeri si sommeranno semplicemente e i blocchi saranno distanziati l'uno dall'altro del valore risultante.

Ad esempio, in questo caso:

Margine superiore: 20px 20px -20px 20px; Margine inferiore: 10px 20px 20px 20px;

Il riempimento risultante tra i blocchi sarà -10px, ad es. quello in basso verrà eseguito sull'elemento Html superiore di 10 px.

Un'altra caratteristica dell'utilizzo della regola del margine nei CSS è che il valore prescritto verticale per gli elementi in linea viene ignorato... Chiedendo:

Margine: 20 pixel;

Ad esempio, per, che è un elemento in linea, in realtà vedremo solo il riempimento orizzontale e non si verificheranno modifiche in verticale.

Andando un po' più avanti di me, dirò che Padding funzionerà per i tag in linea verticalmente, ma l'aumento del padding non influenzerà in alcun modo la sua posizione generale rispetto ad altri elementi vicini.

Nel caso di un tag di blocco (intestazioni, paragrafi), l'aumento verticale di Padding sposterebbe quell'elemento rispetto ad altri blocchi adiacenti.

Bene, anche il bordo (Border), o meglio la sua larghezza, non sarà in grado di allontanare verticalmente altri blocchi adiacenti dal tag in linea. Per gli elementi lineari, il movimento è possibile solo in una direzione: orizzontalmente e basta.

Imbottitura e bordo - Imbottitura e bordi

Passiamo ora all'impostazione del padding tramite la regola Padding e vediamo esattamente quali valori può assumere:

Come puoi vedere, qui non si fa menzione di Auto e questa regola CSS non consente valori negativi (possono essere solo positivi, da zero in su). Quelli. Il riempimento non spingerà il contenuto fuori dalla cornice. Il massimo che si può fare è avvicinare il contenuto alla cornice.

Le percentuali in esso sono calcolate allo stesso modo di Margine, in relazione alla larghezza del contenitore (area del contenuto dell'elemento genitore), che racchiude il nostro elemento. Regola di riempimento combinato in CSSè formato e obbedisce alle stesse leggi discusse sopra:

Imbottitura: 20px 10px 40px 30px;

In questa regola, descriviamo tutti e quattro i lati, iniziando dall'alto. Se è necessario ridurre qualcosa al suo interno (a tre, due o anche un valore), sarà necessario utilizzare i principi di riduzione descritti sopra per i rientri esterni, che funzioneranno esattamente con lo stesso successo per i rientri interni.

E l'ultima cosa che vorrei considerare oggi è il framework che viene impostato utilizzando Confine... Hanno tre tipi di parametri:

1. Larghezza bordo: imposta la larghezza del bordo
2. Colore bordo: imposta il colore
3. Stile bordo: il tipo di bordo o il tipo di linea con cui verrà disegnato

Tutte e tre queste regole CSS hanno un set di valori valido:

Larghezza della linea per la cornice ( Larghezza del bordo) può essere specificato utilizzando sia i numeri in Em, Ex o Px, sia le parole:

1. Sottile - linea sottile;
2. Medio - medio (questo valore è utilizzato per impostazione predefinita);
3. Spessa - spessa.

Come valore per il colore del bordo ( Colore del bordo), è possibile utilizzare i metodi accettati per specificarli (codice esadecimale, parole, ecc.):

Colore bordo: rosso;

Per impostazione predefinita, se il colore del bordo non è specificato in modo esplicito, verrà utilizzato quello utilizzato per il carattere all'interno di questo elemento.
La proprietà CSS Border-style consente di specificare il tipo di bordo in parole:

1. Nessuno - nessun bordo (predefinito)
2. Punteggiato: la linea è disegnata con punti
3. Tratteggiata - linea tratteggiata
4. Solido - linea continua
5. Doppia - doppia linea
6. Scanalatura - bordo rientrato
7. Cresta - sporgente
8. Inizio e inizio - Giocare con l'ombra

Naturalmente, poiché ci sono quattro lati di ogni blocco, puoi usare sia regole generali che regole separate per ciascuno dei lati:

Lo stesso si applicherà a regola di confine prefabbricata- può essere scritto sia per tutti i lati contemporaneamente (Border), sia per ciascuno dei lati separatamente (Border-top, left, bottom e right). L'ordine dei valori non è importante:

Bordo: 1px rosso fisso;

Se manca qualcosa, verrà utilizzato il valore predefinito.

Buona fortuna a te! A presto sulle pagine del sito blog

Potresti essere interessato

Altezza, larghezza e overflow - Regole CSS per descrivere un'area di contenuto in un layout a blocchi
Posizione (assoluta, relativa e fissa) - modalità di posizionamento degli elementi HTML nei CSS (regole sinistra, destra, alto e basso) Stile diverso per collegamenti interni ed esterni tramite CSS
Fluttua e cancella in CSS - strumenti di layout a blocchi
Display (block, nessuno, inline) in CSS - imposta il tipo di visualizzazione degli elementi Html sulla pagina web
Stile elenco (tipo, immagine, posizione) - Regole CSS per personalizzare l'aspetto degli elenchi nel codice Html
Sfondo in CSS (colore, posizione, immagine, ripetizione, allegato) - tutto per impostare il colore di sfondo o l'immagine di sfondo degli elementi HTML
A cosa servono i CSS, come collegare fogli di stile a cascata a un documento Html e le basi della sintassi di questo linguaggio Come impostare il colore di sfondo alternato di righe di tabelle, elenchi e altri elementi Html su un sito utilizzando la pseudo-classe nth-child
Regole per i caratteri (peso, famiglia, dimensione, stile) e l'altezza della linea per lo stile dei caratteri nei CSS

La proprietà CSS padding è responsabile dell'impostazione del padding all'interno dell'elemento dal suo bordo

Sintassi di riempimento CSS

imbottitura: in alto a destra in basso a sinistra;

• top - offset dal bordo superiore dell'elemento;
• right - offset dal bordo destro dell'elemento;
• bottom - offset dal bordo inferiore dell'elemento;
• left - offset dal bordo sinistro dell'elemento;

I valori sono più spesso espressi in pixel. Sono consentite anche le percentuali e altre unità CSS valide.

Nota 1
Non sono ammessi quattro valori. A seconda del numero di valori, le azioni saranno diverse:

• Se vengono forniti 3 valori, il primo valore imposta il riempimento in alto, il secondo a sinistra e a destra contemporaneamente e il terzo in basso.
• Se vengono forniti 2 valori, il primo valore imposta il rientro superiore e inferiore, il secondo a sinistra e a destra del contenuto
• Se impostato su 1 valore, il rientro è impostato sullo stesso rientro per tutti i lati. Ad esempio:

imbottitura: 10px 10px 10px 10px; Puoi impostarlo in modo più compatto: imbottitura: 10px;

Nota 2
A differenza della proprietà margin CSS, i valori di riempimento negativi non sono consentiti.

Anche il padding ha 4 proprietà CSS separate. Ognuno di loro è responsabile di una certa direzione.

• padding-left - padding dal bordo sinistro dell'elemento;
• padding-right - padding dal bordo destro dell'elemento;
• padding-top - padding dal bordo superiore dell'elemento;
• padding-bottom - padding dal bordo sinistro dell'elemento;

ad esempio

imbottitura: 3px 5px 7px 10px; Oppure puoi chiedere in dettaglio: padding-left: 10px; padding-right: 5px; imbottitura: 3px; fondo imbottitura: 7px;

Esempi con rientri diversi all'interno di un elemento

Esempio 1. Rientro del testo all'interno di un tag

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта

Описание

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

padding: [значение | проценты] {1, 4} | inherit

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Riso. 2. Applicazione della proprietà padding

Modello oggetto

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

Browser

Internet Explorer fino alla versione 7.0 inclusa non supporta il valore di ereditarietà.

Questa proprietà può avere da uno a quattro valori.

Nell'immagine, un colore grigio chiaro indica l'area di cui è responsabile la proprietà padding:

1. Quando si specifica quattro valori(5px 10px 15px 20px) - l'ordine del padding sarà il seguente: Superiore(5px) - Destra(10px) - Metter il fondo a(15 pixel) - Sono partiti(20px). Puoi usare una parola inglese per memorizzare l'ordine di posizionamento dei rientri interni in una dichiarazione. TR tu BL e (dove T- superiore, R- Giusto, B- metter il fondo a, l- sinistra).


2. Quando si specifica tre valori(5px 10px 15px) - l'ordine del padding sarà il seguente: Superiore(5px) - Destra sinistra(10px) - Metter il fondo a(15px).


3. Quando si specifica due valori(5px 10px) - il primo valore (5px) imposterà la quantità di riempimento dalla parte superiore e inferiore del contenuto dell'elemento, il secondo valore (10px) imposterà il riempimento a sinistra ea destra del contenuto dell'elemento.


4. Quando si specifica un significato(5px) - l'imbottitura su tutti i lati avrà le stesse dimensioni - 5px.

Supporto browser

Sintassi CSS:

Sintassi JavaScript:

Object.style.padding = "5px"

Valori delle proprietà

Versione CSS

Ereditato

Animato

Esempio di utilizzo

Imposta il valore dei margini attorno al contenuto dell'elemento. Un margine è la distanza dal bordo interno della cornice di un elemento a un rettangolo immaginario che ne delimita il contenuto (Figura 1).

Riso. 1. Campo a sinistra del testo

La proprietà padding consente di impostare il valore del margine per tutti i lati di un elemento contemporaneamente o di definire i margini solo per i lati specificati.

brevi informazioni

Sintassi

imbottitura: [<размер> | <проценты>] {1, 4}