Marže vs. Padding
Rozdíl mezi marginem a paddingem je důležitým aspektem v CSS, protože margin a padding jsou dva důležité koncepty používané v CSS k zajištění mezer mezi různými položkami. Vycpávky a okraje nejsou zaměnitelné a mají různé účely, takže je třeba je vhodně používat. Výplň je prostor mezi obsahem a okrajem bloku. Na druhé straně okraj je prostor mimo hranici bloku. Okraj odděluje bloky od sousedních bloků, zatímco výplň odděluje okraj od obsahu.
Co je výplň?
V CSS (Cascading Style Sheets) je výplň mezera mezi obsahem a okrajem. Odděluje obsah bloku od jeho okraje. Výplň je průhledná a zahrnuje také obrázek pozadí nebo barvu pozadí prvku. Velikost odsazení prvku je specifikována pomocí výrazu „vycpávka“v kódu CSS. Například pro přidání 25px odsazení kolem obsahu lze použít následující kód.
div {
width: 300px;
height: 300px;
padding: 25px;
border: 25px solid;
}
V případě potřeby lze samostatně zadat různé hodnoty výplně pro levou, pravou, horní a spodní stranu. Následující část kódu určuje různé hodnoty výplně pro každou stranu.
div {
width: 300px;
height: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
border: 25px solid;
}
Co je marže?
V CSS (Cascading Style Sheets) je okraj prostor vně okraje. Odděluje blok od ostatních bloků. Okraj je také průhledný, ale velký rozdíl oproti vyplnění spočívá v tom, že okraj nezahrnuje obrázky pozadí nebo barvy pozadí použité na prvek. Výše marže v CSS je specifikována pomocí termínu „marže“. Následující část kódu použila 25px okraj kolem bloku div.
div {
width: 320px;
height: 320px;
border: 5px solid;
margin: 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 {
width: 320px;
height: 320px;
border: 5px solid;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}
Jaký je rozdíl mezi okrajem a výplní?
• Padding je prostor mezi okrajem a obsahem, zatímco margin je prostor vně okraje.
• Výplň odděluje obsah bloku od okraje. Okraj odděluje jeden blok od druhého.
• Výplň se skládá z obrázků na pozadí a barev pozadí použitý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á.
Shrnutí:
Padding versus Margin
Padding je prostor uvnitř ohraničení bloku, který odděluje ohraničení od obsahu. Okraj je mezera vně okraje, která odděluje blok od sousedních bloků. Dalším rozdílem je, že výplň zahrnuje obrázek na pozadí a barvy pozadí použité kolem obsahu, zatímco okraj je neobsahuje. Okraje sousedních bloků se mohou při vykreslování stránky prohlížečem někdy překrývat, ale u vyplnění se nic takového nestane.
