Proprietà padding CSS: come creare campi
I CSS offrono agli sviluppatori Web enormi opportunità per la progettazione di pagine HTML. Possono sembrare difficili per un principiante, ma se le capisci a fondo e metodicamente, la tecnologia dei fogli di stile sarà sottomessa e il layout dei siti non sarà più difficile. Una delle proprietà indispensabili del CSS è il riempimento . È usato per impostare campi per blocchi di pagine HTML.
Cosa sono i blocchi?
Il sito è costruito da blocchi di mattoni. Inoltre, ogni elemento, indipendentemente dal suo contenuto, deve avere una forma rettangolare. Cioè, tutte le immagini e le iscrizioni sono mentalmente concluse dallo sviluppatore nelle "scatole", con le quali crea una pagina web.
Molto spesso i blocchi sono impostati da tag.
.
- . . Le proprietà CSS vengono applicate a ciascun elemento: padding , margine , bordo , larghezza e altro. La larghezza di un rettangolo di blocco è data dalla proprietà width , quindi ogni elemento è costituito da campi che sono delineati usando l'attributo border. Infine, un componente di pagina può avere margini esterni, o rientri, un margine , separandolo da un altro blocco. Sintassi della proprietà padding CSS
I creatori di fogli di stile a cascata hanno fornito diverse opzioni per scrivere un attributo per impostare i campi. Puoi creare un'area vuota all'interno del blocco in otto modi diversi! La tabella seguente mostra esempi per ciascuna opzione e fornisce loro una breve spiegazione.
Esempio di utilizzo
chiarificazione
imbottitura: 15 px;
Se l'attributo è seguito da un singolo numero, ciò significa che l'elemento avrà gli stessi campi da tutti i lati. La voce px assume che il valore sia in pixel. Cioè, come risultato, il blocco avrà margini di 15 pixel.
imbottitura: 18 px 36 px;
Il primo dei due numeri indica che i campi verticali saranno di 18 pixel ciascuno, i campi laterali due volte più grandi - 36 pixel.
imbottitura: 6 px 12 px 18 px;
La media è il valore dei campi sui lati (sinistra e destra), gli altri due sono campi verticali. Il primo numero (6 px) si riferisce al campo superiore e l'ultimo (18 px) si riferisce a quello inferiore.
imbottitura: 6 px 12 px 18 px 36 px;
Il modulo della proprietà padding CSS, in cui sono presenti quattro numeri, consente di specificare i campi su tutti i lati del blocco. I valori numerici sono coerentemente applicati al campo superiore e in senso orario a destra, inferiore e sinistra.
riempimento-sinistra: 14 px;
L'aggiunta di sinistra parla da sola: il campo verrà impostato solo a sinistra dell'elemento.
riempimento-destra: 14 px;
Simile alla precedente opzione di record: il campo verrà creato solo a destra del blocco.
padding-top: 14 px;
La voce identifica il campo sopra.
imbottitura-fondo: 14 px;
La voce identifica il campo sottostante.
Va notato che il padding CSS predefinito è zero. Questo attributo non è ereditabile, ovvero deve essere impostato per ogni blocco. Oltre ai normali e comprensibili pixel, la larghezza dello spazio vuoto attorno ai blocchi è data in unità relative. Ad esempio, negli esempi sopra, puoi registrare il 5% - di conseguenza, la larghezza del campo viene calcolata automaticamente dal browser.
Come usare la proprietà?
Quindi, i moduli dei record degli attributi vengono esaminati, ma come usarli su una pagina HTML? La prima opzione è più "bella", quando tutto ciò che riguarda la tecnologia CSS non è scritto in HTML, ma è reso in un file separato con l'estensione appropriata.
La seconda opzione è scrivere direttamente nel tag < style >. Il riempimento CSS in questo caso è definito come segue:
< div style = " padding: 22 px">
Come scrivere un attributo - scegliere un creatore. In ogni caso, è necessario possedere tutti i modi per utilizzare la proprietà per determinare i campi al fine di utilizzarlo occasionalmente.
Sintassi della proprietà padding CSS
I creatori di fogli di stile a cascata hanno fornito diverse opzioni per scrivere un attributo per impostare i campi. Puoi creare un'area vuota all'interno del blocco in otto modi diversi! La tabella seguente mostra esempi per ciascuna opzione e fornisce loro una breve spiegazione.
Esempio di utilizzo | chiarificazione |
imbottitura: 15 px; | Se l'attributo è seguito da un singolo numero, ciò significa che l'elemento avrà gli stessi campi da tutti i lati. La voce px assume che il valore sia in pixel. Cioè, come risultato, il blocco avrà margini di 15 pixel. |
imbottitura: 18 px 36 px; | Il primo dei due numeri indica che i campi verticali saranno di 18 pixel ciascuno, i campi laterali due volte più grandi - 36 pixel. |
imbottitura: 6 px 12 px 18 px; | La media è il valore dei campi sui lati (sinistra e destra), gli altri due sono campi verticali. Il primo numero (6 px) si riferisce al campo superiore e l'ultimo (18 px) si riferisce a quello inferiore. |
imbottitura: 6 px 12 px 18 px 36 px; | Il modulo della proprietà padding CSS, in cui sono presenti quattro numeri, consente di specificare i campi su tutti i lati del blocco. I valori numerici sono coerentemente applicati al campo superiore e in senso orario a destra, inferiore e sinistra. |
riempimento-sinistra: 14 px; | L'aggiunta di sinistra parla da sola: il campo verrà impostato solo a sinistra dell'elemento. |
riempimento-destra: 14 px; | Simile alla precedente opzione di record: il campo verrà creato solo a destra del blocco. |
padding-top: 14 px; | La voce identifica il campo sopra. |
imbottitura-fondo: 14 px; | La voce identifica il campo sottostante. |
Va notato che il padding CSS predefinito è zero. Questo attributo non è ereditabile, ovvero deve essere impostato per ogni blocco. Oltre ai normali e comprensibili pixel, la larghezza dello spazio vuoto attorno ai blocchi è data in unità relative. Ad esempio, negli esempi sopra, puoi registrare il 5% - di conseguenza, la larghezza del campo viene calcolata automaticamente dal browser.
Come usare la proprietà?
Quindi, i moduli dei record degli attributi vengono esaminati, ma come usarli su una pagina HTML? La prima opzione è più "bella", quando tutto ciò che riguarda la tecnologia CSS non è scritto in HTML, ma è reso in un file separato con l'estensione appropriata.
La seconda opzione è scrivere direttamente nel tag < style >. Il riempimento CSS in questo caso è definito come segue:
< div style = " padding: 22 px">
Come scrivere un attributo - scegliere un creatore. In ogni caso, è necessario possedere tutti i modi per utilizzare la proprietà per determinare i campi al fine di utilizzarlo occasionalmente.