Imbottitura CSS vs. Margine

All'interno di HTML, abbiamo bisogno di CSS per modellare le pagine Web dinamiche o statiche. Lo stile CSS fornisce alla nostra pagina una vista estetica. L'estetica di qualsiasi pagina web dipende fortemente dai margini e dai imbottiture utilizzati nello stile CSS. L'imbottitura si riferisce allo spazio dato da una proprietà di imbottitura a qualsiasi elemento specifico al suo bordo. Mentre il margine si riferisce allo spazio tra il bordo di un elemento relativo all'altro bordo dell'elemento o in alto della pagina, in basso della pagina, della pagina a sinistra e della pagina a destra. Se non conosci la differenza tra la proprietà del margine e la proprietà di imbottitura di CSS in HTML, questo articolo ti aiuterà molto a acquisire conoscenze di base.

Esempio # 01:

Iniziamo con il primo esempio di utilizzo degli esempi HTML per elaborare la differenza tra la proprietà del margine e la proprietà di imbottitura. Consrueremo prima l'uso della proprietà del margine. Quindi, dobbiamo formare un nuovo file HTML con l'estensione "HTML". Dobbiamo aprirlo all'interno di qualsiasi strumento di programmazione come Visual Studio Code. Abbiamo iniziato il codice HTML con il tag "HTML" che si terrà all'ultimo di tutti i tag. Dopo l'inizio del tag HTML, abbiamo avviato il tag principale per mettere al suo interno gli altri tag correlati.

Abbiamo aggiunto il tag del titolo al suo interno per creare un nuovo titolo per la nostra pagina web HTML (i.e., Margine.) Dopo il tag del titolo, abbiamo aggiunto il tag "stile" all'interno del tag principale di questo file HTML che è stato utilizzato per modellare la pagina Web HTML. Avremo una maschera al tag di stilishing dopo l'elaborazione di un tag del corpo. Abbiamo usato il tag "corpo" dopo che il titolo di testa è stato chiuso. Il tag del corpo contiene 2 etichette di intestazione per la voce più grande "1a" (i.e. H1.) Questi titoli contengono titoli diversi al suo interno come mostrato di seguito. Abbiamo specificato due classi diverse per entrambe le intestazioni separatamente per P1 e P2. Le classi P1 e P2 saranno utilizzate per modellare rispettivamente la prima e la seconda intestazione su diversi formati di stile.

Il tag del corpo insieme al tag HTML principale è stato chiuso qui come puoi vedere nell'immagine del codice Visual Studio. Abbiamo usato le classi P1 e P2 qui per modellare entrambe le intestazioni separatamente. Abbiamo usato la proprietà del bordo per aggiungere il bordo blu solido da 2 pixel attorno a entrambe le intestazioni. La proprietà del margine è stata utilizzata qui per aggiungere margini di 100 pixel per la direzione 1 da tutti i lati e per aggiungere margini di 50 pixel per la direzione 2 da tutti i lati. Il codice per la pagina HTML è stato completato per visualizzare l'uso della proprietà margin. Salviamo prima e poi eseguiamolo in un browser. Puoi selezionare qualsiasi browser a tua scelta (io.e., Cromo, mozilla, opera ed ecc.)

Dopo aver eseguito questo file direttamente nel browser di Google Chrome, abbiamo il risultato di seguito. Ha visualizzato le due intestazioni della dimensione "1" sullo schermo della pagina web con un bordo solido blu. Dato che abbiamo applicato la proprietà del margine su entrambe le intestazioni, quindi il primo bordo intestato è stato localizzato 100 pixel lontano dalla sua pagina superiore, in basso, a sinistra e a destra. Inoltre, la seconda intestazione è di 50 pixel lontana dalla sua sinistra, a destra, in basso e in alto (rispetto all'intestazione 1). Ecco come un margine può fare uno spazio tra il bordo di un elemento bordo a un altro.

Aggiorniamo un po 'lo stesso codice HTML per fornire un aspetto diversificato alla pagina HTML. Abbiamo usato lo stesso file con il titolo "margine" come mostrato di seguito. Il tag di stile è stato avviato dopo la fine di un tag del titolo. Abbiamo utilizzato la classe P1 per la direzione 1 e P2 per la direzione 2. All'interno del padmargin.File HTML, abbiamo usato entrambe le classi P1 e P2 nel loro stile. Abbiamo assegnato lo stesso valore di un bordo blu solido per le intestazioni come abbiamo fatto nell'illustrazione sopra. Successivamente, abbiamo specificato la proprietà del margine superiore e del margine inferiore per la prima intestazione della dimensione 1 e ha dato a entrambe le proprietà un valore di 50 pixel. Successivamente, abbiamo specificato il margine sinistro e lo spazio del margine destro di 30 pixel fino alla voce 2 della dimensione "1". Ciò significa che ci sarà meno spazio a sinistra e a destra di un'intestazione rispetto ai margini superiore e inferiore. Salviamo questo codice da eseguire.

Dopo aver eseguito il file HTML in Visual Studio e l'apertura nel browser Chrome, il risultato è stato visualizzato. La prima intestazione contiene il margine di 50 pixel dalla sua parte superiore e inferiore mentre la seconda intestazione contiene il margine sinistro e destro del 30 percento rispetto a questa pagina e l'intestazione sopra. Ecco come il margine può essere applicato a tag diversi.

Esempio # 02:

Guarderemo l'imbottitura rispetto ai margini. Abbiamo usato i due titoli della dimensione 1 all'interno del tag corporeo di questo file a partire dai loro nomi di classe specificati, P1 e P2. Prima dell'uso del tag corporeo, useremo il tag Head in questo file HTML. Questo tag contiene il tag del titolo e il tag di stile in esso. Il tag del titolo è stato dato per nominare la pagina HTML come margine. Il tag di stile viene utilizzato per applicare CSS agli elementi HTML. Abbiamo applicato il bordo blu da 2 pixel ad entrambe le intestazioni nel tag del corpo. Inoltre, abbiamo applicato il margine del 10 percento a tutti i lati di un'intestazione con una classe P1 mentre il 10 % di imbottitura alla seconda intestazione contenente la classe P2. Lo abbiamo fatto finora per verificare la differenza tra gli aggiornamenti del margine e dell'imbottitura sulle intestazioni separatamente nello stesso file.

Dopo aver salvato questo codice HTML, lo abbiamo eseguito sul codice Visual Studio. Questo file verrà eseguito nel browser Google Chrome. Per vedere il risultato, abbiamo l'output di seguito. La differenza tra la proprietà del margine e la proprietà di imbottitura di CSS è stata chiara. La prima intestazione contiene il margine del 10 percento del bordo al resto della sua pagina. Mentre l'imbottitura viene dato uno spazio del 10 percento tra l'intestazione e il bordo.

Conclusione:

Abbiamo spiegato la differenza tra il margine e le proprietà di imbottitura dello stile CSS in HTML. Dimostra che l'imbottitura è tra il bordo e l'elemento mentre il margine è tra il bordo e il resto della pagina. Il primo esempio è stato dimostrare l'uso di margini in modo molto evidente mentre l'ultimo esempio ha mostrato la differenza di imbottitura relativa ai margini.