Margin vs Padding
Rozdíl mezi okrajem a polstrováním je důležitým aspektem v CSS, protože okraj a polstrování jsou dva důležité pojmy používané v CSS k zajištění mezer mezi různými položkami. Výplně a okraje nejsou vzájemně zaměnitelné a mají různé účely, takže je nutné je použít vhodným způsobem. Výplň je prostor mezi obsahem a okrajem bloku. Okraj na druhé straně je prostor mimo hranici bloku. Okraj odděluje bloky od sousedních bloků, zatímco výplň odděluje hranice od obsahu.
Co je výplň?
V CSS (Cascading Style Sheets) je výplň prostorem mezi obsahem a ohraničením. Odděluje obsah bloku od jeho okraje. Výplň je průhledná a zahrnuje také obrázek na pozadí nebo barvu pozadí prvku. Množství polstrování prvku je specifikováno použitím výrazu „polstrování“v kódu CSS. Například k přidání výplně 25px kolem obsahu lze použít následující kód.
div {
šířka: 300px;
výška: 300px;
výplň: 25px;
ohraničení: 25px pevné;
}
V případě potřeby lze samostatně zadat různé hodnoty odsazení pro levou, pravou, horní a dolní část. Následující část kódu určuje různé hodnoty odsazení pro každou stranu.
div {
šířka: 300px;
výška: 300px;
vycpávka: 25px;
polstrované dno: 35px;
výplň vlevo: 5px;
výplň vpravo: 10px;
ohraničení: 25px pevné;
}
Co je to Margin?
V CSS (Cascading Style Sheets) je margin prostor mimo hranici. Odděluje blok od ostatních bloků. Okraj je také průhledný, ale velký rozdíl oproti výplni je, že okraj neobsahuje obrázky pozadí ani barvy pozadí aplikované na prvek. Výše marže v CSS je specifikována pomocí výrazu „marže“. Následující část kódu použila okraj 25px kolem bloku div.
div {
šířka: 320px;
výška: 320px;
ohraničení: 5px pevné;
okraj: 25px;
}
Pro různé strany bloku lze zadat různé hodnoty. Následující část kódu používá různé hodnoty okrajů pro každou stranu.
div {
šířka: 320px;
výška: 320px;
ohraničení: 5px pevné;
horní okraj: 25px;
spodní okraj: 35px;
levý okraj: 5px;
pravý okraj: 10px;
}
Jaký je rozdíl mezi Margin a Padding?
• Výplň je prostor mezi ohraničením a obsahem, zatímco okraj je prostor mimo ohraničení.
• Výplň odděluje obsah bloku od ohraničení. Okraj odděluje jeden blok od druhého.
• Výplň se skládá z obrázků pozadí a barev pozadí aplikovaných na obsah, zatímco okraj takový obsah neobsahuje.
• Okraje sousedních bloků se mohou překrývat, zatímco výplň se nepřekrývá.
Souhrn:
Výplň vs Margin
Výplň je prostor uvnitř ohraničení bloku, který odděluje ohraničení od obsahu. Okraj je mezera mimo hranici, která odděluje blok od sousedních bloků. Další rozdíl spočívá v tom, že polstrování zahrnuje obrázek pozadí a barvy pozadí aplikované kolem obsahu, zatímco okraj je neobsahuje. Okraje sousedních bloků se někdy mohou překrývat, když prohlížeč vykreslí stránku, ale pro výplň se taková věc nestane.
Obrázky se svolením:
