Margin vs Padding
A margó és a kitöltés közötti különbség fontos szempont a CSS-ben, mivel a margó és a kitöltés két fontos fogalom, amelyet a CSS-ben használnak a különböző elemek közötti távolság biztosítására. A betétek és a margók nem cserélhetők fel, és más célúak, ezért megfelelően kell használni őket. A kitöltés a tartalom és a blokk szegélye közötti tér. A margó viszont egy blokk határán kívüli tér. A margó elválasztja a blokkokat a szomszédos blokkoktól, míg a párnázat a szegélyt a tartalomtól.
Mi a Padding?
A CSS-ben (Cascading Style Sheets) a kitöltés a tartalom és a határ között megtartott hely. Elválasztja egy blokk tartalmát az élétől. A párnázat átlátszó, és tartalmazza az elem háttérképét vagy háttérszínét is. Az elem kitöltésének mennyiségét a „kitöltés” kifejezés használatával lehet megadni a CSS-kódban. Például egy 25 képpontos betét hozzáadásához a tartalom köré a következő kód használható.
div {
szélesség: 300px;
magasság: 300px;
párnázás: 25px;
szegély: 25px szilárd;
}
Szükség esetén különféle kitöltési értékeket külön meg lehet adni a bal, a jobb, a felső és az alsó részhez is. A következő kódrész mindkét oldalhoz különböző kitöltési értékeket határoz meg.
div {
szélesség: 300px;
magasság: 300px;
topding-top: 25px;
aljzat: 35 képpont;
párnázás-bal: 5px;
jobb párnázás: 10 képpont;
szegély: 25px szilárd;
}
Mi az árrés?
A CSS-ben (Cascading Style Sheets) a margó a határon kívüli tér. Elválaszt egy blokkot a többi blokktól. A margó is átlátszó, de nagy különbség a kitöltéssel szemben, hogy a margó nem tartalmazza az elemre alkalmazott háttérképeket vagy háttérszíneket. A fedezet összegét a CSS-ben a „margin” kifejezéssel határozzuk meg. A következő kóddarab 25px margót alkalmazott a div blokk körül.
div {
szélesség: 320px;
magasság: 320px;
szegély: 5 képpont szilárd;
margó: 25px;
}
Különböző értékek adhatók meg a blokk különböző oldalain is. A következő kódrész mindkét oldalra különböző margóértékeket alkalmaz.
div {
szélesség: 320px;
magasság: 320px;
szegély: 5 képpont szilárd;
margin-top: 25 képpont;
margó-alsó: 35 képpont;
bal margó: 5 képpont;
jobb szél: 10 képpont;
}
Mi a különbség a Margin és a Padding között?
• A kitöltés a határ és a tartalom közötti tér, míg a margó a határon kívüli tér.
• A párnázás elválasztja a blokk tartalmát a határtól. A margó elválasztja az egyik blokkot a másiktól.
• A kitöltés a háttérképekből és a tartalomhoz alkalmazott háttérszínekből áll, míg a margó nem tartalmaz ilyeneket.
• A szomszédos tömbök margói átfedhetnek, míg a párnázás nem fedi egymást.
Összegzés:
Padding vs Margin
A kitöltés egy blokk határán belüli tér, amely elválasztja a határt a tartalomtól. A margó a határon kívüli távolság, amely elválaszt egy blokkot a szomszédos blokkoktól. További különbség, hogy a kitöltés tartalmazza a háttérképet és a háttér körül alkalmazott háttérszíneket, míg a margó nem tartalmazza azokat. A szomszédos blokkok margói néha átfedhetik egymást, amikor a böngésző rendereli az oldalt, de kitöltésre ilyen nem fog történni.
Képek jóvoltából:
