e proprietà CSS.

Prova a modificare i valori delle proprietà margine E imbottitura e capirai cosa è cosa.. e se è già chiaro, andiamo avanti..

Possibili valori di margine e riempimento.

Nell'esempio precedente, l'assegnazione delle proprietà margine E imbottitura utilizzando un valore, abbiamo determinato i margini e il riempimento dell'elemento su tutti e quattro i lati. Per specificare margini e dimensioni di riempimento diversi per ciascun lato di un elemento, è necessario specificare due, tre o quattro argomenti separati da uno spazio. Inoltre, a seconda del numero di valori, il risultato sarà diverso.

Ecco alcuni esempi:

margine: 5px; - un valore.
Un valore: i margini sono gli stessi su tutti i lati.

margine: 5px 40px; - due significati.
Primo valore: imposta i margini dai bordi superiore e inferiore.

margine: 5px 40px 20px; - tre significati.
Secondo valore: imposta i margini dai bordi sinistro e destro dell'elemento.

margine: 5px 40px 20px 1px; -quattro significati.
Primo valore: imposta il margine dal bordo superiore dell'elemento.
Secondo valore: imposta il margine dal bordo destro dell'elemento.
Terzo valore: imposta il margine dal bordo inferiore dell'elemento.
Quarto valore: imposta il margine dal bordo sinistro dell'elemento.

CON imbottitura la questione segue lo stesso principio di margine, il riempimento dai bordi interni dell'elemento al contenuto assume dimensioni a seconda del numero di argomenti e dei loro valori.

Margine e riempimento delle proprietà secondarie.

Proprietà CSS margine E imbottitura sono di base e hanno una serie di proprietà figlie.

U margine Questo:

• margine superiore- Margine dal bordo superiore dell'elemento genitore,
• margine sinistro- Margine dal bordo sinistro dell'elemento genitore,
• margine destro- Margine dal bordo destro dell'elemento genitore,
• margine-inferiore- Margine dal bordo inferiore dell'elemento genitore.

E imbottitura rispettivamente:

• parte superiore imbottita- Rientro dal bordo superiore dell'elemento al suo contenuto,
• imbottitura-sinistra- Rientro dal bordo sinistro dell'elemento al suo contenuto,
• imbottitura a destra- Rientro dal bordo destro dell'elemento al suo contenuto,
• fondo imbottito- Rientro dal bordo inferiore dell'elemento al suo contenuto.

Beh, penso che sia chiaro... se è necessario determinare il rientro o il margine da un singolo lato di un elemento, è meglio utilizzare una delle proprietà di cui sopra.

I margini e il riempimento sono uno dei componenti principali del design di un sito Web e ci sono diverse linee guida da seguire a questo proposito.

Evita il riempimento breve, e soprattutto zero, dal contenuto ai bordi dell'elemento, soprattutto per i blocchi di testo. Il testo con margini e rientri piccoli è difficile da leggere e appiccicoso.

Seguire le regole di proporzionalità e commensurabilità dei margini e dei rientri sia per un singolo elemento che per l'intera pagina (composizione degli elementi) nel suo insieme.

Uno dei modi per focalizzare l'attenzione di un visitatore della pagina sul punto di cui hai bisogno è utilizzare rientri più grandi del solito; un tale contrasto costringerà lo spettatore a guardare e prestare attenzione a punti "speciali" nel testo.

In questo articolo vorrei raccontarvi come posizionarlo correttamente campi(imbottitura) e rientranza(margine) nei CSS.

Ricordiamo innanzitutto la definizione dei margini e del riempimento secondo la specifica W3C. Nel modello box, i margini sono la distanza tra il contenuto e il bordo della scatola. E il riempimento è la distanza tra il bordo di un blocco e il bordo di un elemento adiacente o genitore.

Pertanto, se il bordo e lo sfondo dell'elemento non sono specificati, non c'è differenza, utilizzare la proprietà riempimento o margine per impostare i rientri, ma a condizione che la larghezza (larghezza) e l'altezza (altezza) dell'elemento non siano specificate e l'algoritmo per calcolare le dimensioni del contenuto utilizzando le proprietà di ridimensionamento dei riquadri.

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

Ora vediamo come posizionare correttamente i margini e lo spazio tra gli elementi. Prendiamo come esempio il blocco seguente.

Questo è il blocco delle notizie. È composto da un'intestazione, 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 gli stessi margini sinistro e destro, è meglio impostare i margini sul blocco genitore piuttosto che impostare i margini sinistro e destro per ciascun elemento individualmente.

Notizie (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 notizie, avrà già i rientri necessari a sinistra e a destra.

Accade spesso che tutti gli elementi all'interno di un blocco abbiano lo stesso riempimento a sinistra e a destra, tranne uno, che non dovrebbe avere alcun riempimento, ad esempio a causa dello sfondo. In questo caso, puoi impostare il riempimento negativo per l'elemento. Quindi non dovrai rimuovere i campi all'interno del blocco per altri elementi.

Ora devi impostare i margini verticali tra gli elementi. Per fare ciò, è necessario determinare quale degli elementi è obbligatorio. Ovviamente non può esistere un blocco notizie senza un elenco di notizie; allo stesso tempo non può esistere il collegamento “Altre notizie”; il titolo può anche essere rimosso, ad esempio, quando viene modificata la grafica.

Tenendo conto di ciò, impostiamo il rientro in basso per il titolo, e il rientro in alto per il link “Altre notizie”.

News__title (margine-bottom: 10px;) .news__more-link (margine-top: 12px;)

Potremmo ottenere lo stesso risultato esterno aggiungendo il riempimento in alto e in basso per l'elenco delle notizie.

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

Ora è necessario impostare i rientri tra le singole notizie. Ancora una volta, tieni presente che il numero di notizie può variare e potrebbe essere elencata una sola notizia.

Puoi impostare un rientro superiore per ogni notizia tranne la prima, o un rientro inferiore per ogni notizia tranne l'ultima. La prima opzione è preferibile perché lo pseudo-selettore:first-child è stato aggiunto nelle specifiche CSS 2.1 e ha un supporto più ampio, a differenza dello pseudo-selettore:last-child, che è stato aggiunto solo nelle specifiche CSS 3.0.

Articolo-news__list (margine-top: 18px;) .articolo-news__list:first-child (margine-top: 0;)

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

A volte non possiamo fare affidamento sugli elementi richiesti. Ad esempio, abbiamo una finestra popup all'interno della quale è possibile visualizzare titolo e testo. Inoltre, in alcuni casi potrebbe non esserci testo, e in altri casi potrebbe non esserci titolo. Cioè, entrambi gli elementi sono facoltativi.

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 agli spazi verticali tra i blocchi adiacenti. La definizione di rientro che ho dato sopra dice che il rientro è la distanza tra frontiere blocchi attuali e vicini. Pertanto, se posizioniamo due blocchi uno sotto l'altro e diamo a uno di essi un margine inferiore di 30px e all'altro un margine superiore di 20px, il margine tra loro non sarà di 50px, ma di 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”.

Tieni presente che i rientri orizzontali, a differenza di quelli verticali, non “collassano”, ma vengono riepilogati. Vengono riepilogati anche i campi (padding).

Conoscendo il "collasso" dei rientri, possiamo sfruttare questa funzionalità a nostro vantaggio. Ad esempio, se dobbiamo rientrare i titoli e il testo all'interno di un articolo, allora per il titolo di primo livello imposteremo il rientro inferiore a 20px, e per il titolo di secondo livello il rientro superiore sarà 20px e quello inferiore sarà 10px, e per in tutti i paragrafi impostiamo il rientro superiore su 10px.

H1 ( margine inferiore: 24px; ) h2 ( margine superiore: 24px; margine inferiore: 12px; ) p ( margine superiore: 12px; )

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

Regole generali

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

1. Se gli elementi adiacenti hanno lo stesso riempimento, è meglio impostarli sul contenitore principale anziché sugli elementi.
2. Quando imposti i rientri tra gli elementi, dovresti considerare se l'elemento è obbligatorio o facoltativo.
3. Per un elenco di elementi simili, non dimenticare che il numero di elementi può variare.
4. Fai attenzione al riempimento verticale e utilizza questa funzione dove ti avvantaggerà.

Tag: aggiungi tag

Ultimo aggiornamento: 04/08/2016

Un campo di testo a riga singola viene creato utilizzando l'elemento input quando il suo attributo type è impostato su text:

Puoi personalizzare il campo di testo utilizzando una serie di attributi aggiuntivi:

dirname: imposta la direzione del testo

maxlength: il numero massimo di caratteri consentiti in un campo di testo

modello: definisce il modello a cui deve corrispondere il testo di input

segnaposto: imposta il testo visualizzato per impostazione predefinita nella casella di testo

readonly: rende il campo di testo di sola lettura

obbligatorio: indica che il campo di testo deve avere un valore

size: imposta la larghezza del campo di testo in caratteri visibili

valore: imposta il valore predefinito nel campo di testo

Applichiamo alcuni attributi:

Inviare Annulla

In questo esempio, la seconda casella di testo imposta immediatamente gli attributi maxlength e size. In questo caso, la dimensione, ovvero il numero di caratteri che rientrano nello spazio visibile del campo, è maggiore del numero di caratteri consentito. Tuttavia, non saremo ancora in grado di inserire più caratteri della lunghezza massima.

In questo caso è importante distinguere anche tra gli attributi valore e segnaposto, sebbene entrambi impostino il testo visibile nel campo. Tuttavia, il segnaposto imposta una sorta di suggerimento o richiesta di input, quindi di solito è disattivato. Mentre il valore rappresenta il testo predefinito inserito nel campo:

Gli attributi sola lettura e disabilitato rendono il campo di testo non disponibile, ma hanno un effetto visivo diverso. In caso di disabilitato, il campo di testo è disattivato:

Tra gli attributi di un campo di testo vale anche la pena notare un attributo come list . Contiene un riferimento a un elemento datalist, che definisce un insieme di valori che appaiono come tooltip quando vengono immessi in un campo di testo. Per esempio:

Inviare

L'attributo list di un campo di testo punta all'id dell'elemento datalist. L'elemento datalist stesso definisce gli elementi dell'elenco utilizzando elementi opzione nidificati. E quando digiti in un campo di testo, questo elenco viene visualizzato come descrizione comando.

Campo di ricerca

Per creare campi di ricerca, utilizzare l'elemento input con l'attributo type="search". Formalmente è un semplice campo di testo:

Campo password

Per inserire una password, utilizzare l'elemento input con l'attributo type="password". La sua caratteristica distintiva è che i caratteri inseriti vengono mascherati da punti:

I margini e il riempimento sono stili molto importanti quando si crea una pagina HTML. Ti consentono di posizionare gli elementi in modo più accurato, creare una cornice con gli spazi necessari, ecc. Entrambi gli stili sono molto simili e svolgono funzioni simili. Ma ci sono ancora delle differenze.

Gli elementi possono essere nidificati o posizionati uno accanto all'altro. Diamo un'occhiata al seguente esempio:

Abbiamo due tavoli, limone e blu, posizionati uno sotto l'altro. Le tabelle sono costituite da una cella. C'è un blocco rosso nella prima cella della tabella. Usando questo esempio, vediamo come funzionano i margini e i rientri.

I campi sono impostati in base allo stile imbottitura. Questo stile si applica solo agli elementi contenitore, che possono contenere altri elementi. Lo stile consente di impostare il margine tra i bordi di un elemento e il suo contenuto. Stile margine ti consente di impostare i rientri da un elemento ai bordi più vicini di un altro elemento. I bordi di un altro elemento possono essere i bordi del contenitore genitore, così come i bordi della pagina stessa.

Esistono diversi modi per impostare questi stili. Ad esempio, specifica direttamente la dimensione di tutti i margini o i rientri con un argomento in un'unità di misura (px, ex, em, pt, cm e così via):

imbottitura: 3px; margine: 3px;

In questo caso, i margini e i rientri saranno gli stessi su tutti e quattro i lati. Quando si specificano due argomenti separati da uno spazio:

imbottitura: 3px 5px; margine: 3px 5px;

il primo determinerà la quantità di margini/rientri in alto e in basso, il secondo a sinistra e a destra. Quando vengono forniti tre argomenti:

imbottitura: 3px 5px 2px; margine: 3px 5px 2px;

il primo è il margine/rientro in alto, il secondo è sia a destra che a sinistra, il terzo è in basso. Con quattro argomenti:

imbottitura: 3px 5px 2px 6px; margine: 3px 5px 2px 6px;

il primo è il margine/spazio in alto, il secondo è a destra, il terzo è in basso, il quarto è a sinistra. È facile da ricordare: il primo è dall'alto, poi in senso orario. Inoltre, puoi impostare separatamente i margini e il riempimento per un bordo specifico, utilizzando gli stili appropriati: parte superiore imbottita, imbottitura a destra, fondo imbottito, imbottitura-sinistra, margine superiore, margine destro, margine-inferiore, margine sinistro. Il valore di questi stili può essere solo un argomento, che specifica la quantità di margine/imbottitura per un dato lato.

Nella figura, il blocco rosso è all'interno della cella della tabella e adiacente ai suoi bordi, ovvero la cella non ha margini. Impostiamo i margini della cella utilizzando lo stile:

imbottitura: 5px;

Di conseguenza, la pagina cambierà come segue:

Consideriamo ora le rientranze. Due tabelle sono adiacenti tra loro, se vogliamo allontanarle un po' possiamo applicare dei rientri. Ci sono due opzioni qui: impostare il rientro inferiore della prima tabella o il rientro superiore della seconda tabella. Usiamo il secondo:

margine superiore: 5px;

Tieni presente che impostiamo il rientro specificatamente sulla tabella e non sulla cella della tabella, come nel caso dei campi. Ecco il risultato:

A proposito, nel primo caso (lo spazio tra il blocco rosso e i confini della cella madre), lo stesso effetto potrebbe essere ottenuto impostando i rientri del blocco. In generale, se qualcosa non è chiaro, fatecelo sapere nei commenti.

Codice HTML della pagina di test:

<html> <testa > <titolo > Test</titolo> <meta http-equiv = "Tipo di contenuto" content = "text/html;charset=utf-8" > </testa> <corpo> <stile > tabella (larghezza: 200px; altezza: 150px; bordo: 1px solido #555; collasso bordo: collasso) td (allineamento verticale: superiore; imbottitura: 0px) div (larghezza: 100px; altezza: 100px; sfondo: rosso)</stile> <stile tabella = "sfondo: lime" > <tr > <td style = "padding: 5px" > <div style = "margine: 0px" ></div> </td> </tr> </tabella> <stile tabella = "sfondo: azzurro; margine superiore: 5px"> <tr > <td ></td> </tr> </tabella> </corpo> </html>