Când să utilizați marginea vs padding în CSS

„container având clasa „ margin-div ” și aplicați „ stil „atribut ca „ chenar: 1px negru solid ”. După aceea, adăugați ceva text în „

' etichetă:

< div clasă = 'margin-div' stil = „chenar: 1px negru solid” >
< p >Linuxhint este unul dintre cele mai bune site-uri web de tutoriale.< br >
< / p >
< div >

Ieșire

Acum, aplicați proprietatea „margin” pe clasa „.margin-div”:

.margin-div {
fundal- culoare : rgb ( 199 , 238 , 205 ) ;
font- mărimea : mediu;
frontieră : 3px rgb ( 114 , 250 , 114 ) ;
marjă: 100px 100px 100px 100px;
}

În codul de mai sus, „ .margin-div ” este utilizat pentru a accesa elementul div pentru a aplica proprietățile enumerate mai jos:

• „ culoare de fundal ” este folosită pentru a aplica culoarea în fundal.
• „ marimea fontului ” este utilizat pentru a ajusta dimensiunea fontului.
• „ marginea ” alocă spațiul în afara elementului. De exemplu, am setat proprietatea „margină” ca „ 100px ”.

Aici, puteți vedea că am setat cu succes „ marginea ” proprietate pe a doua ” div ' element:

Cum se utilizează „padding” în CSS?

Pentru a utiliza proprietatea „padding”, au fost utilizate exemplele de mai sus. In secunda ' div „container, utilizați clasa „ padding-div ” pentru a aplica umplutură:

< div clasă = 'linux' >
< p > Linuxhint este unul dintre cele mai bune site-uri de tutoriale < / p >
< / div >
< div clasă = 'padding-div' stil = „chenar: 1px negru solid” >
< p >Linuxhint este unul dintre cele mai bune site-uri web de tutoriale.< br >
< / p >
< / div >

Ieșire

Pentru a aplica padding și alte proprietăți CSS pe „ .padding-div ” clasa, aruncați o privire la codul furnizat:

.padding-div {
fundal- culoare : rgb ( 199 , 238 , 205 ) ;
font- mărimea : mediu;
umplutură: 50px 50px 50px 50px;
}

În codul menționat mai sus, am accesat al doilea „ div „element folosind clasa „ .padding-div ”. Am setat „culoarea fundalului” și „dimensiunea fontului”. În plus, „ căptușeală Proprietatea ” este folosită pentru a adăuga spațiu în jurul conținutului elementului de pe fiecare parte ca „ 50px ”.

Ieșire

Am explicat diferențele și utilizările „padding” și „margin” în CSS.

Concluzie

CSS „ marginea ” este utilizat pentru a seta distanța în jurul elementului, în timp ce „ căptușeală ” este folosit pentru a adăuga spațiere în jurul conținutului elementului. Pentru a aplica marja sau proprietatea de umplutură, mai întâi, creați un „ div ” container și specificați clasa. După aceea, accesați clasa după numele clasei și aplicați „ marginea ' și ' căptușeală ” proprietăți. Această postare a explicat utilizarea marginii vs padding în CSS.