Rozdíl mezi marží a vycpávkou

Margin vs Padding
 

Rozdíl mezi okrajem a výplní je v aspektu důležitým aspektem CSS jako okraj a výplň jsou dva důležité pojmy používané v CSS k zajištění mezery mezi různými položkami. Výplně a okraje nejsou zaměnitelné a mají různé účely, proto je nutné je správně používat. Výplň je mezera mezi obsahem a okrajem bloku. Okraj, na druhé straně, je prostor za hranicí bloku. Okraj odděluje bloky od sousedních bloků, zatímco výplň odděluje okraj od obsahu.

Co je padding?

V CSS (Kaskádové styly), výplň je mezera 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í výplně prvku je určeno pomocí výrazu „výplň“ 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;
čalounění: 25px;
okraj: 25px pevná;

V případě potřeby lze samostatně zadat i různé hodnoty výplně pro levou, pravou, horní a dolní část. Následující část kódu určuje různé hodnoty výplně pro každou stranu.

div
šířka: 300px;
výška: 300px;
výplň: 25px;
výplň: 35px;
padding-left: 5px;
padding right: 10px;
okraj: 25px pevná;

Co je to Margin?

V CSS (Cascading Style Sheets) je okrajem mezera za hranicí. Oddělí blok od ostatních bloků. Okraj je také průhledný, ale velký rozdíl oproti výplni spočívá v tom, že okraj nezahrnuje obrázky pozadí ani barvy pozadí aplikované na prvek. Výše marže v CSS se určuje pomocí termínu „marže“. Následující část kódu použila kolem bloku div hranici 25px.

div
šířka: 320px;
výška: 320px;
okraj: 5px pevná;
marže: 25px;

Pro různé strany bloku lze také 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;
okraj: 5px pevná;
okraj: 25px;
okraj-dole: 35px;
levý okraj: 5px;
pravý okraj: 10px;

Jaký je rozdíl mezi Marginem a Paddingem??

• Výplň je mezera mezi ohraničením a obsahem, zatímco okraj je mezera mimo ohraničení.

• Vycpávka odděluje obsah bloku od ohraničení. Okraj odděluje jeden blok od druhého.

• Čalounění se skládá z obrázků na pozadí a barev pozadí aplikovaných na obsah, zatímco okraj není takový.

• Okraje sousedních bloků se mohou překrývat, zatímco výplň se nepřekrývá.

Souhrn:

Padding vs Margin

Výplň je prostor uvnitř ohraničení bloku, který odděluje ohraničení od obsahu. Okraj je mezera mimo okraj, která odděluje blok od sousedních bloků. Dalším rozdílem je, že čalounění zahrnuje obrázek na 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 vycpání se tak nestane.

Obrázky se svolením:

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