Rozdiel medzi maržou a vypchávkou

Margin vs Padding
 

Rozdiel medzi maržou a vypchávkou je dôležitým aspektom CSS pretože okraj a výplň sú dva dôležité pojmy používané v CSS na zabezpečenie medzier medzi rôznymi položkami. Výplň a okraje nie sú vzájomne zameniteľné a majú odlišné účely, preto sa musia používať primerane. Výplň je medzera medzi obsahom a hranicou bloku. Okraj, na druhej strane, je priestor za hranicou bloku. Okraj oddeľuje bloky od susedných blokov, zatiaľ čo čalúnenie oddeľuje okraj od obsahu.

Čo je výplň?

V CSS (Kaskádové štýly), čalúnenie je priestor medzi obsahom a okrajom. Oddeľuje obsah bloku od jeho okraja. Výplň je priehľadná a obsahuje tiež obrázok na pozadí alebo farbu pozadia prvku. Množstvo výplne prvku sa určuje pomocou výrazu „výplň“ v kóde CSS. Napríklad na pridanie čalúnenia 25px okolo obsahu možno použiť nasledujúci kód.

div
šírka: 300px;
výška: 300px;
čalúnenie: 25px;
hranica: 25px pevná látka;

V prípade potreby je možné samostatne určiť aj iné hodnoty výplne pre ľavú, pravú, hornú a spodnú. Nasledujúca časť kódu určuje rôzne hodnoty výplne pre každú stranu.

div
šírka: 300px;
výška: 300px;
výplň: 25px;
čalúnenie: 35px;
vypchávka vľavo: 5px;
vypchávka - pravá: 10px;
hranica: 25px pevná látka;

Čo je Margin?

V CSS (Cascading Style Sheets) je okrajom medzera za hranicou. Oddeľuje blok od ostatných blokov. Okraj je tiež priehľadný, ale s polstrovaním je veľký rozdiel v tom, že okraj nezahŕňa obrázky pozadia ani farby pozadia aplikované na prvok. Výška marže v CSS sa určuje pomocou termínu „marža“. V nasledujúcom kóde bol okolo bloku div použitý okraj 25px.

div
šírka: 320px;
výška: 320px;
hranica: 5px pevná látka;
marža: 25px;

Rôzne hodnoty môžu byť zadané aj pre rôzne strany bloku. Nasledujúca časť kódu používa pre každú stranu odlišné hodnoty okrajov.

div
šírka: 320px;
výška: 320px;
hranica: 5px pevná látka;
horná hranica: 25 px;
okraj-spodok: 35px;
ľavý okraj: 5px;
pravý okraj: 10px;

Aký je rozdiel medzi Marginom a Paddingom??

• Čalúnenie je medzera medzi hranicou a obsahom, zatiaľ čo okraj je medzera za hranicou.

• Čalúnenie oddeľuje obsah bloku od okraja. Okraj oddeľuje jeden blok od druhého.

• Čalúnenie pozostáva z obrázkov na pozadí a farieb pozadia aplikovaných na obsah, zatiaľ čo okraj nemá taký obsah.

• Okraje susedných blokov sa môžu prekrývať, zatiaľ čo čalúnenie sa neprekrýva.

Zhrnutie:

Padding vs Margin

Výplň je priestor vo vnútri bloku, ktorý oddeľuje okraj od obsahu. Okraj je medzera mimo hranice, ktorá oddeľuje blok od susedných blokov. Ďalším rozdielom je, že výplň obsahuje obrázok na pozadí a farby pozadia aplikované okolo obsahu, zatiaľ čo okraj ich neobsahuje. Okraje susediacich blokov sa niekedy môžu prekrývať, keď prehliadač vykreslí stránku, ale pri vypchávaní sa tak nestane.

Snímky s láskavým dovolením:

1. Model CSS boxu od Felix.leg (CC BY-SA 3.0)