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

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ę)?

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ł.

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.

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

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)

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ć.

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

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.

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.

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/

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).

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.

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.

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>

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.

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.

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

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.

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.

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

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!

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