Marža verzus 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é koncepty používané v CSS na zabezpečenie medzier medzi rôznymi položkami. Výplň a okraje nie sú zameniteľné a majú rôzne účely, preto sa musia používať primerane. Výplň je priestor medzi obsahom a okrajom bloku. Na druhej strane okraj je priestor mimo hranice bloku. Okraj oddeľuje bloky od susedných blokov, zatiaľ čo výplň oddeľuje okraj od obsahu.
Čo je výplň?
V CSS (Cascading Style Sheets) je výplň medzera medzi obsahom a okrajom. Oddeľuje obsah bloku od jeho okraja. Výplň je priehľadná a zahŕňa aj obrázok pozadia alebo farbu pozadia prvku. Veľkosť výplne prvku je určená použitím výrazu „výplň“v kóde CSS. Ak chcete napríklad pridať 25 pixelov okolo obsahu, môžete použiť nasledujúci kód.
div {
width: 300px;
height: 300px;
padding: 25px;
border: 25px solid;
}
V prípade potreby je možné samostatne zadať rôzne hodnoty výplne pre ľavú, pravú, hornú a spodnú stranu. Nasledujúca časť kódu špecifikuje rôzne hodnoty výplne pre každú stranu.
div {
width: 300px;
height: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
border: 25px solid;
}
Čo je marža?
V CSS (Cascading Style Sheets) je okraj priestor mimo okraja. Oddeľuje blok od ostatných blokov. Okraj je tiež priehľadný, ale veľký rozdiel oproti výplni spočíva v tom, že okraj neobsahuje obrázky pozadia ani farby pozadia použité na prvok. Výška marže v CSS je špecifikovaná výrazom „marža“. Nasledujúca časť kódu použila okolo bloku div okraj 25 pixelov.
div {
width: 320px;
height: 320px;
border: 5px solid;
margin: 25px;
}
Pre rôzne strany bloku je možné zadať aj rôzne hodnoty. Nasledujúca časť kódu používa rôzne hodnoty okrajov pre každú stranu.
div {
width: 320px;
height: 320px;
border: 5px solid;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}
Aký je rozdiel medzi okrajom a výplňou?
• Odsadenie je priestor medzi okrajom a obsahom, zatiaľ čo okraj je priestor mimo okraja.
• Výplň oddeľuje obsah bloku od okraja. 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ý obsah neobsahuje.
• Okraje susedných blokov sa môžu prekrývať, kým výplň sa neprekrýva.
Zhrnutie:
Padding vs. Margin
Padding je priestor vo vnútri okraja 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ň zahŕňa obrázok na pozadí a farby pozadia použité okolo obsahu, zatiaľ čo okraj ich neobsahuje. Okraje susedných blokov sa môžu niekedy pri vykresľovaní stránky prehliadačom prekrývať, ale v prípade výplne sa niečo také nestane.
