Om du är ny på CSS (Cascading Style Sheets), har du förmodligen hört talas om orden padding och margin. Båda kan verka likadana, men deras användningsområden är olika. Du kanske inte vet hur du använder dessa två i din webbdesign, eller så kanske du vill förbättra din design. Låt oss lära oss vad dessa två begrepp är, deras skillnader och hur man använder dem. Innan vi svarar på frågan om vaddering mot marginal, låt oss ta en närmare titt på varje komponent.
Vad är stoppning och marginal?
Vaddering och marginal är en del av det som kallas en lådmodell. I CSS är allt omgivet av Box Model. Varje ruta består av 4 delar: innehållskanten, utfyllnadskanten, kantgränsen och marginalkanten. Så här fungerar boxmodellen: ett innehållsområde i mitten, runt vilket du kan göra stoppningen, runt vilken du kan göra bården och runt vilken du kan göra marginalen.
Vaddering används för att skapa utrymme runt ett element inom en kant. Öka storleken på ett element eller minska dess innehåll för att skapa utrymme. Du kan också ställa in stoppningen för alla fyra sidor av artikeln.
Utfyllnadsgenvägar: stoppning-top, stoppning-höger, stoppning-botten, stoppning-vänster.
Marginalen är avståndet mellan ett element från dess omgivande element. Marginalen ligger utanför två element. Med andra ord skapar marginalen ett utrymme utanför gränsen. Marginalen kan också ställas in på alla fyra sidor av ett föremål. Marginalfunktionen låter dig skapa mellanslag mellan HTML-element. Marginalgenvägar: marginal topp, marginal höger, marginal botten, marginal vänster.
Utfyllnad vs marginal
Båda används för att skapa utrymmen mellan element, men skillnaden ligger i skapandet av utrymmen. Marginal skjuter bort intilliggande element från den; På ett sätt pressar det dem. Vaddering skapar utrymme genom att öka dess storlek eller minska storleken på det inre elementet.
Marginaler och stoppning är genomskinliga. En annan skillnad mellan stoppning och marginal är att stoppning inkluderar bakgrundsbilder och bakgrundsfärger, men inte marginaler, bakgrundsbilder och färger. Marginalen är området utanför gränsen, utrymmet mellan stoppningen, gränsen och innehållet.
När ska man använda stoppning eller marginal?
När du designar din webbplats måste du veta vilken du ska använda. Du kan använda Marginal när du vill flytta ett element upp, ner, höger och vänster på sidan. Centrera ett element horisontellt på din sida med en fast bredd genom att öka värdet för automatisk marginal om så önskas. Du bör även använda marginal när du vill justera avståndet mellan element som ligger nära varandra. Dessutom kan du också överlappa element eftersom negativa element är tillgängliga när du använder marginaler.
Överväg att använda stoppning när du vill skapa utrymme mellan ett element och en kantlinje. När du gör detta kan du också se bakgrunden runt elementet. Du kan också använda utfyllnad för att ändra storlek på ett objekt. När du ökar utfyllnadsvärdet förblir texten i samma storlek men med mer utrymme runt den.
Vanliga frågor om utfyllnad vs marginal
Hur kan jag lägga till utfyllnad i CSS?
Du kan lägga till utfyllnad med egenskaperna padding-top, padding-right, padding-bottom, padding-left runt ett element i CSS. Du kan också enkelt lägga till utfyllnad i CSS med hjälp av genvägarna du skapade.
Vad är syftet med margin-bottom i CSS?
Egenskapen Margin-bottom används för att ställa in marginalerna under en artikel. Det positiva värdet försvinner; det negativa värdet närmar sig.
Hur kan jag stänga av automatisk marginal i CSS?
Du måste ge header-taggen en 1px-kant och du kan inaktivera automatisk marginal genom att ställa in brödmarginalen till noll.
Hur kan jag lägga till färger i CSS-utfyllnad?
Du kan använda bakgrundsklippfunktionen och boxskuggan för att lägga till färg till CSS-utfyllnaden. Du kan också lägga till färg på stoppningen, men du kan inte använda den här funktionen på marginalen.
Hur kan jag lägga till marginal i CSS?
Det är i princip samma sak som att lägga till filler. Allt du behöver göra är att använda marginal-topp, marginal-höger, marginal-botten och marginal-vänster istället för “utfyllnadsord”. Du kan också använda genvägar som du själv skapat.
Slutsats om stoppning vs marginal
I den här artikeln pratar vi om vad stoppning och marginal är, hur man använder dem och skillnaderna mellan dem för de som är nybörjare när det gäller att designa en webbplats eller förbättra sin design.
Vi hoppas att vi har kunnat hjälpa till. Om du har kommit så här långt tror vi att du också kan vara intresserad av vår recension av de 10 bästa webbdesignerna vi har valt åt dig.
