Rientro dal bordo CSS. Imbottitura e margini

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

Il riempimento su tutti i lati è importante per ogni elemento della pagina quando posizionato in modo assoluto e il riempimento in cima al CSS è definito specificamente in quanto è importante vari elementi, soprattutto minuscolo.

Regole di posizionamento di base

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

Il margine superiore è particolarmente importante. Il CSS all'interno di un blocco associa le regole di riempimento con le regole per elementi posizionati in modo assoluto e relativo all'interno di quel blocco.

Una pratica comune per le regole CSS è quella di specificare gli stessi margini su tutti i lati, alto/basso e destra/sinistra in coppia, o separatamente per ciascun lato. Per esempio,

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

Nel primo caso, l'elemento è rientrato dai lati del contenitore esterno in cui si trova. Nel secondo caso, i margini superiore e inferiore sono 10 px e i margini sinistro e destro sono 20 px. Nel terzo caso, le dimensioni dei rientri sono indicate su tutti i lati: superiore, destro, inferiore e sinistro.

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

Regole che cambiano la posizione degli elementi

Se l'elemento di layout non è posizionato in modo assoluto, viene posizionato in ordine generale formazione della pagina.

Se definisci il riempimento superiore CSS sull'elemento scCurrInfo, l'obiettivo sarà raggiunto e, se a livello li, non lo farà.

V questo esempio usando la regola di riempimento: 40px; richiede un'adeguata riduzione delle regole di larghezza e altezza di 80px. In caso contrario, la dimensione del blocco scCurrInfo andrà 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 rientro superiore. I CSS non applicheranno questo valore ad altri lati.

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

Pratica generale sulla formattazione dei contenuti

Alcuni sviluppatori raggiungono la perfezione con il layout di pagina elementi di blocco... Apparentemente, questa è una pratica classica: inizia con le tabelle e finisci con le tue. processo educativo su blocchi.

La libertà insita nel layout dei blocchi è affascinante e l'immaginazione di uno sviluppatore non deve essere limitata da rigide regole della tabella: solo righe, solo celle, si uniscono solo orizzontalmente e verticalmente. Nulla di peculiare delle idee relazionali.

Nel frattempo, i tavoli, oltre ai loro ovvi svantaggi, hanno molti vantaggi in termini di qualità. Quando si crea il padding in alto, CSS tiene conto del padding a sinistra, a destra (in basso è un momento speciale). Le regole delle celle della tabella consentono di controllare l'allineamento sia verticale che orizzontale. Usando gli stili di riga, combinandoli con gli stili di cella, puoi formare rappresentazioni complesse del contenuto.

La consueta presentazione 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, cioè hanno le proprie regole che completano le regole del blocco.

Posizionamento assoluto

Blocco con regola POSIZIONE: assoluto; sarà nella posizione impostata dalle sue coordinate relative al blocco in cui si trova.

Il segno distintivo delle regole CSS è "pratica - miglior criterio verità "nella maggior parte dei casi, specialmente quando è richiesta la compatibilità tra browser e il layout viene eseguito manualmente, è preferibile studiare manuali completi su fogli di stile a cascata.

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

In alcuni casi, quando devi comporre elementi di pagina nelle profondità di alcuni sistema popolare gestione dei contenuti del sito, è tuttavia necessario prestare attenzione non solo alla pratica sperimentale, ma anche a vedere l'esperienza dei colleghi.

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

Gli elementi possono essere annidati, possono essere adiacenti l'uno all'altro. Diamo un'occhiata al seguente esempio:

Abbiamo due tavoli, limone e blu situati uno sotto l'altro. Le tabelle sono costituite da una cella. C'è un blocco rosso nella cella della prima tabella. In questo esempio, diamo un'occhiata a come funzionano i margini e il padding.

I campi sono impostati dallo stile imbottitura... Questo stile è applicabile solo agli elementi contenitore che possono contenere altri elementi. Lo stile consente di impostare il valore dei margini tra i bordi dell'elemento e il suo contenuto. Stile margine ti permette di impostare il padding da un elemento ai bordi più vicini di un altro elemento. I bordi di un altro elemento possono essere i bordi del contenitore padre, così come i bordi della pagina stessa.

Esistono diversi modi per definire questi stili. Ad esempio, puoi specificare direttamente la dimensione di tutti i margini o il riempimento con un argomento in qualche unità di misura (px, ex, em, pt, cm e così via):

imbottitura: 3px; margine: 3px;

In questo caso, i margini e i margini 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 / riempimento in alto e in basso, il secondo - a sinistra ea destra. Quando vengono forniti tre argomenti:

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

il primo è il margine/imbottitura in alto, il secondo è a sinistra ea destra contemporaneamente, il terzo è in basso. Con quattro argomenti:

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

il primo è il margine/imbottitura in alto, il secondo è a destra, il terzo è in basso e il quarto è a sinistra. È facile da ricordare: il primo è dall'alto, poi in senso orario. Inoltre, puoi impostare margini e margini per un bordo specifico separatamente, utilizzando gli stili appropriati: Imbottitura, padding-right, imbottitura-fondo, 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 si trova all'interno della cella della tabella ed è adiacente ai suoi bordi, ovvero la cella non ha margini. Impostiamo i campi sulla cella usando lo stile:

imbottitura: 5px;

Di conseguenza, la pagina cambierà come segue:

Esaminiamo ora il rientro. Due tabelle sono adiacenti l'una all'altra, se vogliamo allontanarle un po', possiamo applicare dei rientri. Ci sono due opzioni qui: impostare il padding inferiore della prima tabella o il padding superiore della seconda tabella. Usiamo il secondo:

margine superiore: 5px;

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

A proposito, nel primo caso (lo spazio tra la casella rossa e i bordi della cella madre), lo stesso effetto potrebbe essere ottenuto impostando i margini della casella. In generale, se qualcosa non è chiaro, cancelliamo l'iscrizione nei commenti.

Codice HTML della pagina di prova:

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

Buona giornata! L'impostazione di rientri per testo e immagini è l'argomento principale della pubblicazione odierna. Diamo un'occhiata più da vicino a quali approcci possono essere applicati nella pratica.

Durante la creazione di un sito Web, un webmaster si occupa di blocchi di testo e frasi posizionati nelle pagine del progetto. La risoluzione di singole attività è associata a usando HTML tag aggiunti all'editor. Esistono diversi tipi di attributi che consentono di spostare frasi o modificare la posizione dei frammenti di e-page.

Impostare rientri inserendo spazi

Diamo un'occhiata a come indentare il testo in HTML usando tag speciale, prevedendo la formazione di una lacuna. È necessario incollare il codice tutte le volte necessarie per ottenere l'offset desiderato dal bordo della pagina.

Lo sviluppo del codice fornito viene eseguito da tutti i tipi di browser e il webmaster riceverà un risultato garantito. Lo svantaggio di questo metodo risiede nelle possibilità limitate, perché per aumentare la distanza, è necessario aggiungere grande quantità tag, e questo ingombra il documento.

Usando il tag di citazione

Studiando in dettaglio come indentare il testo nel codice HTML, potresti incappare metodo alternativo dando più possibilità.

Qui devi usare blockquote, che ti permette di spostare il frammento a sinistra ea destra di circa 40 px. È sufficiente scrivere il codice identico all'esempio precedente:

Il metodo consente di manipolare frasi all'interno di una dimensione fissa di 40 px. Vale anche la pena notare che in questo tag di solito allegare una citazione.

Opzioni alternative

Se intendi spostarti a una distanza non standard, dovrai utilizzare il parametro di rientro del testo relativo allo stile tabella CSS... Il metodo considerato prevede la creazione di una deviazione della prima riga di distanza desiderata... È necessario apportare le seguenti modifiche all'editor:

Quando è necessario misurare il numero richiesto di pixel da un'immagine, preferiscono codici semplici ma efficienti.

Nel primo caso vengono impostati solo i valori dell'offset dai bordi dell'immagine. Nel secondo, la posizione dell'immagine è impostata a sinistra con il flusso del testo a destra, e nel terzo, viceversa.

L'informazione è giunta al termine. Dimmi, hai trovato le informazioni che ti interessano? Puoi scrivere la risposta nei commenti.

Infine, menzionerò che il blog Workip è principalmente dedicato alle opzioni di denaro per fare soldi online. Sai quali metodi sono davvero promettenti dal punto di vista finanziario? Le descrizioni di alcuni di loro sono già state pubblicate.

La pubblicazione dei materiali continua. Iscriviti a e-mail per aggiornare il progetto. Fino alla prossima volta.

Una risorsa web è valutata dagli utenti per il suo appeal visivo. Pertanto, anche informativo testo utile potrebbe non essere letto a causa del fatto che è mal progettato. Conclusione: è necessario avvicinarsi con attenzione e attenzione non solo al contenuto semantico delle pagine del sito, ma anche al suo presentazione visiva... L'emergenza Tecnologie CSS ampliato le possibilità di creare articoli attraenti. Una delle proprietà progettate per facilitarne la lettura è il rientro. Testo CSS.

Margini e imbottiture: 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 sembrino 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 adiacenti;
• i margini possono essere presi in considerazione nelle dimensioni dell'elemento (larghezza e altezza), oppure no.

Proprietà del margine

Quindi, per impostare il rientro orizzontale o verticale del testo CSS, usa la costruzione margine... Questa proprietà si applica al tag del documento che definisce il paragrafo. nel molto caso sempliceè scritto come:

margine: 12px.

Tale linea significa che attorno al blocco di testo (o qualsiasi altro blocco), verrà creato un rientro di 12 pixel su tutti i lati. Per aumentare l'intervallo, ad esempio, tre volte, è sufficiente annotare:

margine: 36px.

Ma cosa succede se la distanza tra i blocchi dovesse essere diversa su ciascun lato? Gli sviluppatori Web utilizzano diverse forme di scrittura:

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

Nel primo esempio, verranno creati rientri di 11 pixel dai bordi inferiore e superiore del blocco e di 22 pixel 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 bordo inferiore e 22 pixel ciascuno sui lati. Nel terzo caso, il riempimento 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 su un solo lato: margine in alto, margine in basso, margine a sinistra, margine a destra... Avendo tradotto i nomi delle proprietà in russo, è facile indovinare il loro scopo. Ad esempio, la seguente voce dice che il rientro a destra sarà di 22 pixel:

margine destro: 22px.

Per il resto dei lati, si presume che le distanze attorno al blocco siano uguali al valore dell'elemento genitore.

Proprietà margine ha una particolarità che uno sviluppatore deve tenere a mente quando usa il riempimento verticale del testo CSS. Gli intervalli di elementi adiacenti 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 lo spazio totale tra loro sia di 50 pixel. In pratica, questo non è il caso. Blocca con grande valore proprietà margine"inghiottirà" il suo vicino. Di conseguenza, la spaziatura tra gli elementi sarà di 35 pixel.

"Linea rossa

Realizzare un documento in editor di testo, gli utenti preferiscono chiedere a ciascuno nuovo paragrafo utilizzando la linea "rossa". È facile far rientrare il testo a sinistra usando i CSS: viene utilizzata la costruzione indentatura del testo... È scritto così:

rientro del testo: 11px.

Cioè, la prima riga del paragrafo verrà spostata rispetto al bordo sinistro di 11 pixel. Per rendere il testo della pagina Web più simile a un documento nell'editor, è necessario installare anche, ovvero scrivere:

rientro del testo: 11px;

text-align: giustifica.

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

Per di questa proprietà il valore può essere impostato ereditare... Tale voce indica che il blocco utilizza una proprietà simile del blocco padre.

text-indent: eredita.

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

rientro del testo: -22px.

Per evitare che le lettere attraversino il bordo sinistro del browser, oltre a indentatura del testo devi usare la costruzione per impostare il campo:

padding-left: 22px.

Vengono discusse le proprietà CSS di base per. La pratica aiuterà a consolidarli. Ecco alcuni suggerimenti finali su come applicare questo materiale allo sviluppo del tuo sito web:

• la linea rossa e il rientro del testo sono concetti diversi e vengono utilizzate proprietà diverse per indicarli;
• per imbottitura verticale le regole della matematica non si applicano: gli intervalli sono sovrapposti, l'elemento con un valore grande "vince";
• negativo rientro paragrafo sono usati per indicare la prima riga di un paragrafo utilizzando un'immagine.

Ciao cari lettori del sito blog! Oggi continueremo la nostra esplorazione dei fogli di stile a cascata, o CSS. Negli articoli precedenti, abbiamo già considerato in schema generale disposizione dei blocchi posto. Di conseguenza, abbiamo iniziato a ottenere pagine Web abbastanza professionali, ma manca loro qualcosa. E molto probabilmente mancano di rientri e cornici. Oggi daremo un'occhiata alle regole di stile margin, padding e border, che ti permettono di impostare margini e bordi per gli elementi html.

Opzioni di indentazione CSS

Con i fogli di stile a cascata, ci sono due tipi di indentazione.

1.Imbottitura internaÈ la distanza dal confine immaginario di un elemento al suo contenuto. La distanza si imposta tramite il parametro imbottitura... Questa rientranza appartiene all'elemento stesso e si trova al suo interno.

2. Imbottitura esterna- la distanza tra il bordo dell'elemento corrente della pagina web e i bordi degli elementi vicini, oppure elemento genitore... La dimensione della distanza è controllata dalla proprietà margine... Questo rientro è esterno all'elemento.

Per chiarezza, l'immagine:

Ad esempio, considera una cella piena di testo. Quindi il padding è la distanza tra il bordo immaginario della cella e il testo che contiene. E il margine esterno è la distanza tra i bordi delle celle adiacenti. Iniziamo con l'imbottitura.

Imbottitura in CSS con riempimento (in alto, in basso, a sinistra, a destra)

Le proprietà di stile padding-left, padding-top, padding-right e padding-bottom consentono di impostare la quantità di padding, rispettivamente, a sinistra, in alto, a destra e in basso di un elemento della pagina web:

imbottitura | padding-right | fondo imbottito | padding-left: valore | interesse | ereditare

La quantità di rientro può essere specificata in pixel (px), percentuale (%) o altre unità accettabili per CSS. Quando si specifica una percentuale, il valore viene calcolato dalla larghezza dell'elemento. Eredita valore indica che è ereditato dal genitore.

Ad esempio, per il paragrafo corrente, ho applicato una regola di stile che imposta il padding sinistro a 20 pixel, il padding superiore a 5 pixel, il padding destro a 35 pixel e quello inferiore a 10 pixel. La voce della regola sarà simile a questa:

p.test (
padding-left: 20px;
imbottitura: 5px;
padding-right: 35px;
padding-bottom: 10px
}

Regola di imbottitura combinata ti consente di specificare i rientri su tutti i lati di un elemento della pagina web contemporaneamente:

imbottitura:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

V regola combinataè consentito utilizzare uno, due, tre o quattro valori, separandoli con uno spazio. In questo caso, l'effetto dipende dal numero di valori:

• se specifichi un valore, imposterà la quantità di rientro su tutti i lati dell'elemento della pagina;
• se specifichi due valori, il primo imposterà la quantità di rientro in alto e in basso, e il secondo - a sinistra ea destra;
• se specifichi tre valori, il primo determinerà la quantità di rientro in alto, il secondo - a sinistra ea destra e il terzo - in basso;
• se vengono specificati quattro valori, il primo imposterà il padding in alto, il secondo a destra, il terzo in basso e il quarto a sinistra.

Pertanto, la regola CSS di cui sopra può essere abbreviata il più possibile e scritta come segue:

p.test (imbottitura: 5px 35px 10px 20px)

Proprietà del margine o margini in CSS

Gli attributi di stile margin-left, margin-top, margin-right e margin-bottom consentono di impostare i margini rispettivamente per i margini sinistro, superiore, destro e inferiore:

margine superiore | margine destro | margine inferiore | margine sinistro:<значение>| auto | ereditare

Come accennato in precedenza, il padding esterno è la distanza dal bordo dell'elemento corrente al bordo dell'elemento adiacente, o, se non sono presenti elementi adiacenti, al bordo interno del contenitore genitore.

La quantità di rientro può essere specificata in pixel (px), percentuale (%) o altre unità accettabili per CSS:

P (
margine sinistro: 20px;
}
h1 (
margine destro: 15%;
}

Il valore auto significa che la dimensione dei rientri verrà calcolata automaticamente dal browser. In caso di utilizzo di una notazione percentuale, i rientri vengono calcolati in base a la larghezza del contenitore genitore... E questo vale non solo per margin-left e margin-right, ma anche per margin-top e margin-bottom, i rientri in percentuale verranno calcolati in base alla larghezza, non all'altezza del contenitore.

È consentito utilizzare come valori di margine valori negativi:

P (
margine sinistro: -20px;
}

Se per valori positivi dei margini, gli elementi adiacenti si allontanano, quindi per valore negativo il blocco adiacente scorrerà sull'elemento per il quale abbiamo impostato un tale rientro negativo.

Possiamo anche specificare i margini usando l'attributo style margine... Imposta la quantità di rientro su tutti i lati dell'elemento della pagina web contemporaneamente:

margine:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Questa proprietà, in caso di impostazione di uno, due, tre o quattro valori di padding, obbedisce alle stesse leggi della regola di padding.

Opzioni del bordo usando la proprietà del bordo

Quando si personalizzano i frame, ci sono tre tipi di parametri:

• larghezza del bordo - spessore del bordo;
• colore del bordo - colore del bordo;
• border-style - il tipo di linea con cui verrà disegnato il bordo.

Iniziamo con il parametro dello spessore del bordo:

larghezza del bordo: [valore | sottile | medio | spesso] (1,4) | ereditare

Spessore del telaio può essere impostato in pixel o in altri disponibili in unità css... Le variabili thin, medium e thick impostano lo spessore del bordo rispettivamente a 2, 4 e 6 pixel:

larghezza del bordo: media;

Come per le proprietà padding e margin, puoi utilizzare uno, due, tre o quattro valori per il parametro border-width, impostando così la larghezza del bordo per tutti i lati contemporaneamente o per ciascuno separatamente:

larghezza del bordo: 5px 3px 5px 3px

Per il paragrafo corrente, creiamo il bordo superiore 1 pixel, destro 2 pixel, inferiore 3 pixel e sinistro 4 pixel usando la regola (larghezza bordo: 1 pixel 2 pixel 3 pixel 4 pixel;)

Gli attributi di stile border-left-width, border-top-width, border-right-width e border-bottom-width possono essere usati per impostare rispettivamente la larghezza dei lati sinistro, superiore, destro e inferiore del bordo :

bordo-larghezza-sinistra | bordo-larghezza-alto | bordo-larghezza-destra | bordo-larghezza-basso: sottile | medio | spesso |<толщина>| ereditare

Il parametro successivo è il colore del bordo con il quale puoi controllare colore del telaio:

colore del bordo: [colore | trasparente] (1,4) | ereditare

La proprietà consente di impostare il colore del bordo per tutti i lati dell'elemento contemporaneamente o solo per quelli specificati. Come valore, puoi utilizzare i metodi per specificare i colori accettati in html per i colori: codice esadecimale, parole chiave, ecc.:

p (larghezza bordo: 2px; colore bordo: rosso)

Il valore trasparente imposta il colore del bordo su trasparente ed eredita eredita il valore del genitore. Per impostazione predefinita, se non viene specificato alcun colore del bordo, verrà utilizzato quello utilizzato per il carattere all'interno di questo elemento.

Utilizzando gli attributi di stile border-left-color, border-top-color, border-right-color e border-bottom-color, puoi impostare rispettivamente il colore dei lati sinistro, superiore, destro e inferiore del bordo :

border-left-color | border-top-color | border-right-color | border-bottom-color: trasparente |<цвет>| ereditare

E ultimo parametro set in stile bordo tipo di cornice:

stile bordo: (1,4) | ereditare

Il tipo di cornice può essere specificato per tutti i lati dell'elemento contemporaneamente o solo per quelli specificati. Possono essere utilizzati diversi valori parole chiave... L'aspetto dipenderà dal browser utilizzato e dallo spessore del bordo. Significato nessuno viene utilizzato per impostazione predefinita e non visualizza la cornice e il suo spessore è impostato su zero. Il valore nascosto ha lo stesso effetto. Il telaio risultante per il resto dei valori a seconda dello spessore è mostrato nella tabella seguente:

Gli attributi di stile stile bordo sinistro, stile bordo superiore, stile bordo destro e stile bordo inferiore specificano lo stile delle linee che verranno utilizzate per disegnare i lati sinistro, superiore, destro e inferiore di il confine, rispettivamente:

stile bordo-sinistro | stile bordo-alto | stile bordo-destra | stile bordo-basso: nessuno | nascosto | punteggiato | tratteggiato | solido | doppio | scanalatura | cresta | inserto | inizio | ereditare

Come per le opzioni padding e padding, c'è un bordo per il bordo. proprietà universale frontiera... Ti consente di impostare contemporaneamente lo spessore, lo stile e il colore del bordo attorno a un elemento:

confine: | ereditare

I valori possono essere in qualsiasi ordine, separati da spazi:

td (bordo: 1px giallo pieno)

Per impostare il bordo solo su determinati lati di un elemento, ci sono le proprietà border-top, border-bottom, border-left, border-right, che permettono di impostare i parametri per il top, bottom, left e lato destro struttura.

Resta solo da riassumere:

• per incarico imbottitura usiamo la proprietà imbottitura;
• per le impostazioni margini c'è una regola margine;
• opzioni di cornice sono impostati utilizzando l'attributo frontiera.

Nota che tutti questi proprietà css aumentare la dimensione di un elemento della pagina web. Pertanto, se cambiamo lo spessore del bordo o la dimensione dei rientri dei contenitori a blocchi che formano il design della pagina web, dovremo ridimensionare questi contenitori di conseguenza, altrimenti potrebbero spostarsi e il design sarà rotto.

Questo è tutto, a presto!