Różnica między marginesem a wypełnieniem

Margines vs Padding
 

Różnica między marginesem a wypełnieniem jest ważnym aspektem w CSS margines i wypełnienie to dwie ważne koncepcje stosowane w CSS w celu zapewnienia odstępów między różnymi elementami. Wypełnienia i marginesy nie są wymienne i mają różne cele, dlatego należy je odpowiednio stosować. Wypełnienie to przestrzeń między zawartością a ramką bloku. Z drugiej strony margines to przestrzeń poza granicą bloku. Margines oddziela bloki od sąsiednich bloków, a wypełnienie oddziela granicę od zawartości.

Co to jest Padding?

W CSS (Kaskadowe arkusze stylów), dopełnienie to przestrzeń między zawartością a ramką. Oddziela zawartość bloku od jego krawędzi. Wypełnienie jest przezroczyste i zawiera również obraz tła lub kolor tła elementu. Ilość wypełnienia elementu określa się za pomocą terminu „wypełnienie” w kodzie CSS. Na przykład, aby dodać wypełnienie o wielkości 25 pikseli wokół treści, można użyć następującego kodu.

div
szerokość: 300px;
wysokość: 300 pikseli;
wypełnienie: 25px;
obramowanie: ciągłe 25px;

W razie potrzeby można osobno określić różne wartości wypełnienia dla lewej, prawej, górnej i dolnej. Poniższy fragment kodu określa różne wartości wypełnienia dla każdej strony.

div
szerokość: 300px;
wysokość: 300 pikseli;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
obramowanie: ciągłe 25px;

Co to jest marża?

W CSS (Cascading Style Sheets) margines to przestrzeń poza ramką. Oddziela blok od innych bloków. Margines jest również przezroczysty, ale dużą różnicą w przypadku wypełnienia jest to, że margines nie zawiera obrazów tła ani kolorów tła zastosowanych do elementu. Wysokość marży w CSS jest określana przy użyciu terminu „marża”. Poniższy fragment kodu zastosował margines 25px wokół bloku div.

div
szerokość: 320px;
wysokość: 320px;
obramowanie: stałe 5 pikseli;
margines: 25px;

Można również określić różne wartości dla różnych stron bloku. Poniższy fragment kodu stosuje różne wartości marginesów dla każdej strony.

div
szerokość: 320px;
wysokość: 320px;
obramowanie: stałe 5 pikseli;
margines na górze: 25px;
margines na dole: 35px;
margines lewy: 5px;
margines z prawej: 10 pikseli;

Jaka jest różnica między Margin a Padding?

• Wypełnienie to przestrzeń między ramką a treścią, a margines to przestrzeń poza ramką.

• Wypełnienie oddziela zawartość bloku od granicy. Margines oddziela jeden blok od drugiego.

• Wypełnienie składa się z obrazów tła i kolorów tła zastosowanych do zawartości, a margines nie zawiera takiej zawartości.

• Marginesy sąsiednich bloków mogą zachodzić na siebie, podczas gdy wypełnienie nie zachodzi na siebie.

Streszczenie:

Padding vs Margin

Wypełnienie to przestrzeń wewnątrz obramowania bloku, która oddziela obramowanie od treści. Margines to odstęp poza granicą, który oddziela blok od sąsiednich bloków. Inna różnica polega na tym, że wypełnienie obejmuje obraz tła i kolory tła zastosowane wokół zawartości, a margines ich nie zawiera. Marginesy sąsiednich bloków mogą czasami nakładać się, gdy przeglądarka renderuje stronę, ale w przypadku wypełniania takie rzeczy się nie zdarzają.

Obrazy dzięki uprzejmości:

1. Model pudełkowy CSS autorstwa Felix.leg (CC BY-SA 3.0)