Mikor kell használni a margót és a kitöltést a CSS-ben?

Mikor Kell Hasznalni A Margot Es A Kitoltest A Css Ben



A CSS-ben két tulajdonságot használnak az elemek közötti rés/szóköz hozzáadására: ' árrés ” és „ párnázás ”. Ha a felhasználók helyet szeretnének adni a div elemek vagy képek között, bármelyiket használhatják. Pontosabban, a CSS „margó” tulajdonsága helyet biztosít az elemen kívül, míg a „padding” az elem belső részének foglal helyet.

Ez a bejegyzés a következőket írja le:

Mikor kell használni a „kitöltést” és a „margót” a CSS-ben?

CSS ' árrés ” és „ párnázás ” tulajdonságokat használjuk a felület kialakításához. Az elemek közötti extra hézag vagy térköz meghatározására is szolgálnak. Ez a két tulajdonság azonban funkcionálisan különbözik egymástól.







Itt elmagyarázunk néhány különbséget a két tulajdonság között:



árrés párnázás
margó helyet biztosít az elemen kívül. padding helyet biztosít az elem tartalmán belül.
Az elem margóját a következőképpen állíthatjuk be: auto ” az elem körüli margó automatikus beállításához. padding nem állítható be automatikusra. A felhasználónak meg kell adnia az értékeket az elemen belüli tér beállításához.
A margó nem befolyásolta az elem stílusát. Ha háttérszínt alkalmazunk az elemre, az befolyásolja az elem stílusát.
Marginként beállíthatunk pozitív és negatív értékeket is. a padding csak pozitív értékeket támogat.

Hogyan lehet kihasználni a margót a CSS-ben?

A „ árrés ' tulajdonság, először hozzon létre egy '

” tárolót, és rendelje hozzá az osztályt. Például egy osztályt rendeltünk hozzá: Linux ”. Ezután ágyazzon be szöveget egy bekezdéscímkébe '

”:



< div osztály = 'linux' >
< p > A Linuxhint az egyik legjobb oktató webhely < / p >
< / div >

A fent megadott kód eredménye az alábbiakban található:





Most hozzon létre egy másik '

' konténer, amelynek osztálya ' margin-div ” és alkalmazza a „ stílus ' attribútum mint ' szegély: 1 képpont tömör fekete ”. Ezt követően adjon hozzá szöveget a „

” címke:



< div osztály = 'margin-div' stílus = 'szegély: 1 képpont tömör fekete' >
< p >Linuxhint az egyik legjobb oktatówebhely.< br >
< / p >
< div >

Kimenet

Most alkalmazza a „margin” tulajdonságot a „.margin-div” osztályban:

.margin-div {
háttér- szín : rgb ( 199 , 238 , 205 ) ;
betűtípus- méret : közepes;
határ : 3px rgb ( 114 , 250 , 114 ) ;
margó: 100px 100px 100px 100px;
}

A fenti kódban a „ .margin-div ” a div elem eléréséhez használható az alábbi tulajdonságok alkalmazásához:

  • ' háttérszín ” tulajdonság a háttér színének alkalmazására szolgál.
  • ' betűméret ” a betűméret beállítására szolgál.
  • ' árrés ” lefoglalja az elemen kívüli teret. Például a „margin” tulajdonságot „ 100 képpont ”.

Itt láthatja, hogy sikeresen beállítottuk a „ árrés ' ingatlan a másodikon ' div ” elem:

Hogyan használjuk a „kitöltést” a CSS-ben?

A „padding” tulajdonság használatához a fent említett példákat használtuk fel. A másodikban' div ' konténer, használja a '' osztályt padding-div ” a párnázáshoz:

< div osztály = 'linux' >
< p > A Linuxhint az egyik legjobb oktatówebhely < / p >
< / div >
< div osztály = 'padding-div' stílus = 'szegély: 1 képpont tömör fekete' >
< p >Linuxhint az egyik legjobb oktatówebhely.< br >
< / p >
< / div >

Kimenet

Kitöltés és egyéb CSS-tulajdonságok alkalmazása a „ .padding-div ” osztály, vessen egy pillantást a megadott kódra:

.padding-div {
háttér- szín : rgb ( 199 , 238 , 205 ) ;
betűtípus- méret : közepes;
padding: 50px 50px 50px 50px;
}

A fent említett kódban elértük a második „ div ' elem az osztály használatával .padding-div ”. Beállítottuk a „háttérszínt” és a „betűméretet”. Ráadásul a „ párnázás ' tulajdonság arra szolgál, hogy minden oldalról helyet adjon az elemtartalom körül, mint ' 50 képpont ”.

Kimenet

Elmagyaráztuk a „padding” és a „margin” különbségeit és használatát a CSS-ben.

Következtetés

A CSS' árrés ' az elem körüli távolság beállítására szolgál, míg a ' párnázás ” használható szóköz hozzáadására az elemtartalom körül. A margó vagy kitöltési tulajdonság alkalmazásához először hozzon létre egy „ div ” tárolót, és adja meg az osztályt. Ezt követően nyissa meg az osztályt az osztálynév alapján, és alkalmazza a „ árrés ” és „ párnázás ” tulajdonságait. Ez a bejegyzés elmagyarázta a margó és a padding használatát a CSS-ben.