Margin vs Padding
Rozdiel medzi okrajom a výplňou je dôležitým aspektom v CSS, pretože okraj a výplň sú dva dôležité pojmy používané v CSS na zabezpečenie medzery medzi rôznymi položkami. Výplne a okraje nie sú vzájomne zameniteľné a majú odlišné účely, takže sa musia vhodne použiť. Výplň je priestor medzi obsahom a okrajom bloku. Okraj, na druhej strane, je priestor mimo hranice bloku. Okraj oddeľuje bloky od susedných blokov, zatiaľ čo odsadenie oddeľuje okraj od obsahu.
Čo je výplň?
V CSS (kaskádové štýly) je odsadenie priestorom medzi obsahom a okrajom. Oddeľuje obsah bloku od jeho okraja. Výplň je priehľadná a obsahuje aj obrázok na pozadí alebo farbu pozadia prvku. Množstvo výplne prvku je určené použitím výrazu „výplň“v kóde CSS. Napríklad na pridanie výplne 25px okolo obsahu je možné použiť nasledujúci kód.
div {
šírka: 300px;
výška: 300px;
výplň: 25px;
orámovanie: 25px pevné;
}
V prípade potreby je možné osobitne zadať rôzne hodnoty polstrovania pre ľavú, pravú, hornú a spodnú časť. 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;
polstrované dno: 35px;
výplň vľavo: 5px;
výplň vpravo: 10px;
orámovanie: 25px pevné;
}
Čo je to marža?
V CSS (kaskádové štýly) je margin priestor mimo hranice. 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 na pozadí ani farby pozadia aplikované na prvok. Výška marže v CSS sa určuje pomocou výrazu „marža“. Nasledujúca časť kódu použila okraj 25px okolo bloku div.
div {
šírka: 320px;
výška: 320px;
okraj: 5px pevný;
okraj: 25px;
}
Rôzne hodnoty môžu byť zadané rovnako pre rôzne strany bloku. Nasledujúca časť kódu používa rôzne hodnoty okrajov pre každú stranu.
div {
šírka: 320px;
výška: 320px;
okraj: 5px pevný;
horný okraj: 25px;
spodný okraj: 35px;
zľava: 5px;
pravý okraj: 10 pixelov;
}
Aký je rozdiel medzi Margin a Padding?
• Výplň predstavuje priestor medzi orámovaním a obsahom, zatiaľ čo okraj je priestorom mimo orámovania.
• Výplň oddeľuje obsah bloku od hranice. Okraj oddeľuje jeden blok od druhého.
• Výplň pozostáva z obrázkov na pozadí a farieb pozadia aplikovaných na obsah, zatiaľ čo okraj takýto obsah neobsahuje.
• Okraje susedných blokov sa môžu prekrývať, zatiaľ čo výplň sa neprekrýva.
Zhrnutie:
Výplň vs Margin
Výplň je priestor vo vnútri hranice bloku, ktorý oddeľuje hranicu od obsahu. Okraj predstavuje medzery mimo hranice, ktorá oddeľuje blok od susedných blokov. Ďalším rozdielom je, že výplň obsahuje obrázok pozadia a farby pozadia použité okolo obsahu, zatiaľ čo okraj ich neobsahuje. Okraje susedných blokov sa môžu niekedy prekrývať, keď prehliadač vykreslí stránku, ale pri vyplnení sa tak nestane.
Obrázky so zdvorilosťou:
