Forskjeller mellom CSS & Margin Padding

Webdesignere bruke Cascading Style Sheets (CSS) for å konsolidere design beslutninger. Snarere enn å kode standard skriftstørrelser, farger, linjer, flate og bildebredde i hvert element på en HTML-side, en designer peker på en master-fil som inneholder grunnleggende instruksjoner for hele nettstedet. Margin og padding er to instrukser som både skaper plass rundt et element, enten det elementet er et bilde, et avsnitt eller en grense. Men det er viktige forskjeller mellom hvordan marginer og padding er brukt.

padding

Polstringen er mellomrommet mellom et element og dens grensen. Pakninger kan settes til å være generell (den samme på alle fire sider) eller spesifikke til toppen, bunnen, venstre eller høyre side av elementet. I HTML-kode, kan en padding settes spesielt med padding-top og padding-venstre eller det kan settes i stenografi med "padding:. 10px 15px 20px 25px" Det første tallet representerer toppen, det andre tallet representerer retten, det tredje tallet representerer bunnen og det siste tallet representerer venstre.

Margin

Marginen er avstanden mellom kanten av et element og alt annet rundt den. Det er kodet med samme topp, bunn, venstre og høyre parametere som polstring. Merk forskjellen: padding skaper rom innenfor grensen og margin skaper plass utenfor grensen.

Borders

For et element med en kant, forskjellen mellom padding og margin kommer inn i bildet. For eksempel, med et fotografi som designeren ønsker å ha en en-pixel svart ramme som berører kantene på bildet, er plassen opprettet med bare margin (forlater padding satt til null). For et bilde som "flyter" inni hvit plass med en kant berøre innhold rundt det, bruker designeren padding (forlater margin satt til null). Polstring og margin kan anvendes i kombinasjon for å plassere en kant i rommet mellom innholdet og elementet.

bakgrunner

Bakgrunnsfarger elementer "strekk" med padding, men ikke med margin. For eksempel vil en blokk med tekst med en gul bakgrunn bare ha den gule strekker seg til kanten av bokstavene og ingen ytterligere hvis polstringen er satt til null. Stille padding til 10 piksler vil legge noen gule plass rundt teksten, men fargen vil fortsatt berøre noen elementer rundt tekstblokk. Bruke margin vil skape en hvit ramme rundt kanten av den gule boksen.