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

371

Jaka jest dokładnie różnica między marginesem a wypełnieniem w CSS? To naprawdę nie ma większego sensu. Czy możesz podać mi przykład, gdzie leżą różnice (i dlaczego tak ważne jest, aby poznać różnicę)?

maclunian
źródło
14
stackoverflow.com/questions/2189452/… stackoverflow.com/questions/3060456/… stackoverflow.com/questions/4619899/... Pierwsze trzy linki z wyszukiwania padding vs margin. Myślę, że musimy dodać strzałki do paska wyszukiwania i zmienić kolor na zielony.
Wapno
2
Może to pomóc w zrozumieniu różnicy digizol.com/2006/12/margin-vs-padding-css-properties.html
lkamal
2
Pamiętaj również, że Internet Explorer sumuje marginesy / ramki / szerokości wypełnienia inaczej (w domyślnym trybie nie dziwacznym) niż prawie wszystkie inne przeglądarki.
David R Tribble
1
Jeśli margines nie działa, wypróbuj padding
JoelFan

Odpowiedzi:

410

paddingto przestrzeń między treścią a border, natomiast marginjest to przestrzeń poza granicą. Oto obraz znaleziony przeze mnie podczas szybkiego wyszukiwania w Google, który ilustruje ten pomysł.

wprowadź opis zdjęcia tutaj

abcd
źródło
3
Sprawdź także te witryny, aby uzyskać definicję. Ale grafika jest idealną ilustracją. w3schools.com/css/css_margin.asp w3schools.com/css/css_padding.asp
Suroot
@maclunian: sprawdź także tę stronę w3schools.com/css/css_boxmodel.asp oprócz powyższych linków @ Suroot.
abcd
Jak to się ma do ustawionej szerokości i wysokości treści? Gdzie to się mierzy?
Nyerguds
128

Jednej kluczowej rzeczy, której brakuje w odpowiedziach tutaj:

Marginesy górny / dolny są składane.

Jeśli więc masz margines 20 pikseli na dole elementu i margines 30 pikseli na górze następnego elementu, margines między dwoma elementami będzie wynosił 30 pikseli, a nie 50 pikseli. Nie dotyczy to lewego / prawego marginesu ani wypełnienia.

Nathan
źródło
6
Należy zauważyć, że istnieją bardzo specyficzne okoliczności, w których marginesy pionowe się zawalają - nie tylko dwa marginesy pionowe to zrobią. Który po prostu sprawia, że tym bardziej kłopotliwe (chyba że jesteś bardzo zaznajomiony z modelem box).
BoltClock
76

Margines jest stosowany do elementu zewnętrznego , co wpływa na odległość elementu od innych elementów.


Wypełnienie jest stosowane do wnętrza elementu, co wpływa na odległość zawartości elementu od granicy.

Ponadto użycie marginesu nie wpłynie na wymiary elementu, podczas gdy wypełnienie spowoduje, że wymiary elementów (ustawiona wysokość + wypełnienie), więc na przykład, jeśli masz div 100 x 100 pikseli z wypełnieniem 5 pikseli, twoja div będzie w rzeczywistości 105x105 pikseli

LostLin
źródło
15
Uważam, że wypełnienie jest stosowane z każdej strony, więc element miałby wymiary
110
Ehm, wypełnienie afaik nie zmienia szerokości elementu, jeśli ta szerokość została ustawiona na cokolwiek innego niż auto. Jeśli szerokość jest auto, to dodatkowe wypełnienie odpowiednio zwiększy szerokość wypełnionego elementu (i z obu stron, jak wspomniano @ 2013Asker)
Flater
1
Myślę, że nieco mylące jest stwierdzenie, że div będzie mieć wymiary 110 x 110 pikseli, ponieważ szerokość div nadal będzie wynosić 100 pikseli (zakładając, że rozmiar pola jest ustawiony jako pole zawartości).
wmock
44

Pamiętaj o tych 3 punktach:

  • Margines to dodatkowa przestrzeń wokół kontrolki.
  • Wypełnienie to dodatkowa przestrzeń wewnątrz kontrolki.
  • Wypełnienie zewnętrznej kontroli jest marginesem wewnętrznej kontroli .

Obraz demonstracyjny: (gdzie czerwone pole to kontrola pożądania) wprowadź opis zdjęcia tutaj

sms247
źródło
2
To nie odpowiada, dlaczego tak ważna jest znajomość różnicy.
GreenAsJade
38

Najprostsza defensja to; wypełnienie to przestrzeń podana wewnątrz granicy elementu pojemnika, a margines jest podany na zewnątrz. W przypadku elementu, który nie jest pojemnikiem, wypełnienie może nie mieć większego sensu, ale margines defensywnie pomoże go ustawić.

Wiatr Chimez
źródło
30

Wypełnienie to przestrzeń wewnątrz granicy, natomiast Margines to przestrzeń poza granicą.

Abdul Gafoor
źródło
25

Wyściółka

Wypełnienie to właściwość CSS, która określa przestrzeń między zawartością elementu a jego ramką (jeśli ma ramkę). Jeśli element ma ramkę wokół niego, wypełnienie da miejsce od tej granicy do zawartości elementu, która pojawia się w tej ramce. Jeśli element nie ma wokół niego obramowania, wówczas dodanie dopełnienia nie ma żadnego wpływu na ten element, ponieważ nie ma ramki, z której można by zrobić miejsce.

Margines

Margines jest właściwością CSS, która określa przestrzeń zewnętrzną elementu do jego następnego elementu zewnętrznego.

Margines wpływa na elementy, które mają lub nie mają granic. Jeśli element ma ramkę, margines określa przestrzeń od tej granicy do następnego elementu zewnętrznego. Jeśli element nie ma ramki, margines określa przestrzeń od zawartości elementu do następnego elementu zewnętrznego.

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

Różnica między marginesem a wypełnieniem polega na tym, że podczas gdy wypełnienie zajmuje przestrzeń wewnętrzną, margines zajmuje przestrzeń zewnętrzną do następnego elementu zewnętrznego.

Rakesh Singh
źródło
1
Które elementy nie mają granicy?
Sarim Javaid Khan
10

Jedna z kluczowych różnic między marginesem a dopełnieniem nie jest wymieniona w żadnej z odpowiedzi: wykrywalność kliknięcia i najechanie myszą

Zwiększenie wypełnienia zwiększa efektywny rozmiar elementu. Czasami mam małą ikonę, której nie chcę powiększać, ale użytkownik nadal musi wchodzić w interakcje z tą ikoną. Zwiększam dopełnienie ikony, aby nadać jej większy nacisk na kliknięcia i najechanie myszą. Zwiększenie marginesu ikony nie będzie miało takiego samego efektu.

Odpowiedź na inne pytanie na ten temat daje przykład.

Paweł
źródło
Większość najważniejszych odpowiedzi odnosi się do tego, że wypełnienie jest „wewnątrz” elementu, a marginesy są „na zewnątrz” tego elementu, co już oznacza, że ​​wypełnienie przyczynia się do większego obszaru kliknięcia. Nie jest to jednak takie oczywiste, gdy mamy do czynienia z całkowicie przezroczystym pudełkiem ...
BoltClock
9

margin = odstęp wokół (na zewnątrz) elementu od granicy na zewnątrz.

padding = spacja wokół (wewnątrz) elementu od tekstu do ramki.

patrz tutaj: http://jsfiddle.net/robx/GaMpq/

robx
źródło
9

Warto wiedzieć o różnicach między margini padding. Jak wiem:

  • Margines jest przestrzenią zewnętrzną elementu, a wypełnienie jest przestrzenią wewnętrzną elementu. Innymi słowy, margines jest przestrzenią poza granicą elementu, podczas gdy wypełnienie jest przestrzenią wewnątrz jego granicy.
  • Możesz ustawić autowartość na margines. Nie można jednak dopełniać. Zobacz to .
    Uwaga: Użyj, margin: autoaby wyśrodkować element bloku wewnątrz jego elementu nadrzędnego w poziomie. Możliwe jest również wyśrodkowanie elementu wewnątrz flexboksa w pionie, w poziomie lub w obu, poprzez ustawienie marginesu na auto. Zobacz to .
  • Margines może być dowolną liczbą zmiennoprzecinkową, ale wypełnienie nie może być ujemne.
  • Podczas stylizacji elementu dopełnienie również będzie stylizowane; ale nie margines. Margines pobiera styl elementu nadrzędnego. Na przykład, gdy ustawisz background-colorwłaściwość na czarny, jej przestrzeń wewnętrzna (tj. Wypełnienie) będzie czarna, ale nie jej przestrzeń zewnętrzna (tj. Margines).
MAChitgarha
źródło
4

Margines to przestrzeń poza polem; wypełnienie to przestrzeń wewnątrz pudełka. Trudno dostrzec różnicę przy białym wypełnieniu, ale dzięki kolorowemu wypełnieniu widać to dobrze.

Ernest Friedman-Hill
źródło
2

Margines i dopełnienie to naprawdę dwa rodzaje dopełnienia ... Jeden (margines) wychodzi poza granicę elementów, aby oddalić go od innych elementów, a drugi (dopełnienie) wychodzi poza zawartość elementów, aby oddalić zawartość od granicy elementów.

chunkyboy
źródło
2

Wypełnienie pozwala deweloperowi zachować przestrzeń między tekstem a jego elementem otaczającym. Margines to przestrzeń, którą element utrzymuje z innym elementem nadrzędnego DOM.

Zobacz przykład:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>
Rajat
źródło
1

Margines jest właściwością w CSS, która służy do tworzenia przestrzeni wokół elementów poza granicami. Programista może ustawić margines dla górnego, prawego, dolnego i lewego. Innymi słowy, może ustawić te wartości przy użyciu marginesu u góry, marginesu z prawej strony, marginesu u dołu i marginesu z lewej strony.

Wartości marży mogą być następujących typów.

Po pierwsze, auto pozwala przeglądarce obliczyć margines. Ponadto długość oznacza margines w pikselach, pt lub cm, a% pomaga opisać margines jako procent w stosunku do szerokości elementu zawierającego. Wreszcie, dziedziczenie oznacza, że ​​margines musi dziedziczyć z elementu nadrzędnego.

Wypełnienie to właściwość w CSS, która pomaga stworzyć przestrzeń wokół elementu wewnątrz granicy. Programista może ustawić wypełnienie dla górnego, prawego, dolnego i lewego. Innymi słowy, może ustawić te wartości za pomocą padding-top, padding-right, padding-bottom i padding-left.

Wartości dopełnienia mogą być następujących typów.

Długość opisuje wypełnienie w pikselach, pt lub cm, a% oznacza wypełnienie jako procent w stosunku do szerokości elementu zawierającego. Wreszcie, dziedziczenie opisuje, że wypełnienie powinno być dziedziczone z elementu nadrzędnego.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        
<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

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

Margines jest właściwością CSS, która służy do tworzenia przestrzeni wokół elementu poza zdefiniowaną ramką, podczas gdy wypełnienie jest właściwością CSS, która jest używana do tworzenia przestrzeni wokół elementu, wewnątrz zdefiniowanej granicy. Wyjaśnia to zatem główną różnicę między marginesem a wypełnieniem.

Wartości Ponadto wartości marginesu mogą być automatyczne, długości,% lub dziedziczone, podczas gdy wartości dopełniania mogą być długością,% lub rodzajem dziedziczenia. Dlatego jest to kolejna różnica między marginesem a wypełnieniem.

W skrócie, margines i wypełnienie to dwie właściwości w CSS, które pozwalają na stylizację stron internetowych. Nie można przypisać wartości ujemnych dla tych właściwości. Główną różnicą między marginesem a wypełnieniem jest to, że margines pomaga stworzyć przestrzeń wokół elementu poza ramką, podczas gdy wypełnienie pomaga stworzyć przestrzeń wokół elementu wewnątrz granicy.

Zapalony programista
źródło
0

Spróbuj umieścić kolor tła na bloku div o szerokości i wysokości. Przekonasz się, że wypełnienie zwiększa rozmiar elementu, a margines po prostu przesuwa go w obrębie przepływu dokumentu.

Margines służy do przesuwania elementu.

Henz
źródło
0

Wypełnienie to odstęp między najbliższymi komponentami na stronie internetowej, a margines to odstęp od marginesu strony.

prabeesh rk
źródło
0

Jedną rzecz, którą właśnie zauważyłem, ale żadna z powyższych odpowiedzi nie została wspomniana. Jeśli mam dynamicznie utworzony element DOM, który jest inicjowany przy użyciu pustej wewnętrznej zawartości HTML, dobrą praktyką jest stosowanie marginesu zamiast wypełniania, jeśli nie chcesz, aby ten pusty element zajmował jakiekolwiek miejsce, z wyjątkiem jego zawartości.

Creswei
źródło
-1

Jest jedna ważna różnica:

Margines- znajduje się na zewnątrz elementu, tzn. Zastosuje się przesunięcie spacji „po” rozpoczęciu elementu. Padding- jest wewnątrz, drugi zastosuje spację „zanim” element się zacznie.

Ars
źródło
-1

Margines jest stosowany do elementu zewnętrznego, co wpływa na odległość elementu od innych elementów.

Wypełnienie jest stosowane do wnętrza elementu, co wpływa na odległość zawartości elementu od granicy.

Ponadto użycie marginesu nie wpłynie na wymiary elementu, podczas gdy wypełnienie spowoduje, że wymiary elementów (ustawiona wysokość + wypełnienie), więc na przykład, jeśli masz div 100 x 100 pikseli z wypełnieniem 5 pikseli, twoja div będzie w rzeczywistości 105x105 pikseli

Shyamal Kapri
źródło
czy zauważyłeś, że ta odpowiedź została już udzielona? - z dodatkowym i odpowiednim naciskiem?
JerryOL
-1

Zasadniczo różnica między dopełnieniem a marginesem wynika z tła. Wypełnienie decyduje o przestrzeni między treściami, a margines decyduje o zewnętrznej krawędzi elementów!

Vinh Dat Ha
źródło
-7

Wypełnienie to przestrzeń między treścią a ramką. Gdzie jako Margines to przestrzeń pomiędzy na granicy i innego pierwiastka.

ALI MAMOON RIZWAN
źródło
1
Marginesy nie są takie proste, a to nie mówi nic, czego kilkanaście uprzednich odpowiedzi jeszcze nie powiedziało.
Quentin,
2
Właśnie powtórzyłeś poprzednie odpowiedzi.
Johnroe Paulo Cañamaque