Når skal du bruke margin vs polstring i CSS
Dette innlegget beskriver:
- Når skal du bruke "polstring" vs "margin" i CSS?
- Hvordan bruke "margin" i CSS?
- Hvordan bruke "polstring" i CSS?
Når skal du bruke "polstring" vs "margin" i CSS?
CSS “margin”Og“polstring”Egenskaper brukes til å designe grensesnittet. De brukes også til å spesifisere det ekstra gapet eller rommet mellom elementene. Imidlertid skiller disse to egenskapene seg fra hverandre når det gjelder funksjonalitet.
Her vil vi forklare noen distinksjoner mellom begge egenskapene:
| margin | polstring |
|---|---|
| Margin gir plass utenfor elementet. | polstring gir plass inne i innholdet i elementet. |
| Vi kan sette en elementmargin som "bil”For automatisk å stille marginen rundt elementet. | polstring kan ikke settes som auto. Brukeren må spesifisere verdiene for å angi plassen inne i elementet. |
| Margen har ikke påvirket stilen til et element. | Når vi bruker bakgrunnsfarge på elementet, vil det påvirke stylingen av et element. |
| Vi kan sette positive så vel som negative verdier som marginer. | Polstring støtter bare positive verdier. |
Hvordan bruke "margin" i CSS?
Å bruke “margin”Opprett først en“”Container og tilordne klassen. For eksempel har vi tildelt klasse kalt "Linuxhint”. Deretter legge inn litt tekst i et avsnittsmerke " Linuxhint er et av de beste opplæringsnettstedene Resultatet av den ovennevnte koden er nevnt nedenfor: Lag nå en annen “”Container som har klassen“margin-div”Og bruk“stil”Attributt som“Grense: 1px solid svart”. Etter det, legg til litt tekst i " Linuxhint er et av de beste opplæringsnettstedene. Produksjon Nå, bruk "margin" -egenskapen på ".margin-div ”-klasse: I koden ovenfor, ".margin-div”Brukes for tilgang til DIV-elementet som skal brukes under listede egenskaper: Her kan du se at vi har satt "margin”Eiendom på det andre“div”Element: Hvordan bruke "polstring" i CSS? For å bruke "polstring" -egenskapen, er de ovennevnte eksemplene blitt brukt. I det andre “div”Container, bruk klassen“Padding-div”For å bruke polstring: Linuxhint er et av de beste opplæringsnettstedene Linuxhint er et av de beste opplæringsnettstedene. Produksjon For å påføre polstring og andre CSS -egenskaper på “.Padding-div”Klasse, ta en titt på gitt kode: I ovennevnte kode fikk vi tilgang til det andre “div”Element ved bruk av klasse”.Padding-div”. Vi har satt "bakgrunnsfarge" og "fontstørrelse". Dessuten "polstring”Eiendom brukes til å legge til plass rundt elementinnholdet fra hver side som“50px”. Produksjon Vi har forklart forskjellene og bruken av "polstring" og "margin" i CSS. Konklusjon CSS “margin”Brukes til å sette avstanden rundt elementet, mens“polstring”Brukes til å legge til avstand rundt elementinnholdet. For å bruke margin- eller polstringseiendommer, oppretter du først en "div”Container, og spesifiser klassen. Etter det får du tilgang til klassen etter klassenavn og bruk "margin”Og“polstring" egenskaper. Dette innlegget har forklart bruken av margin vs polstring i CSS.
bakgrunnsfarge: RGB (199, 238, 205);
Fontstørrelse: Medium;
Grense: 3px RGB (114, 250, 114);
Margin: 100px 100px 100px 100px;
bakgrunnsfarge: RGB (199, 238, 205);
Fontstørrelse: Medium;
polstring: 50px 50px 50px 50px;