Margin og Padding Styles

Design er ikke et alternativ når du oppretter et nettsted, er det en nødvendighet. Et nettsted som ikke er estetisk tiltalende vil ikke oppfordre besøkende til å bo for å utforske innholdet. Skape innhold som flyter øker sjansene dine for å få flere seere, og hvis du er en bedrift, fullføre salg. En del av designen omfatter marginer og padding.

Margin

Marginen på en side er hvor mye plass du har på hver side på utsiden av innholdet. Marginene gi deg mer eller mindre plass på siden for innholdet, avhengig av hvor store de er satt. Hvis du prøver å oppnå en bestemt stil, kan det være lurt å tilpasse margene selv i stedet for å la din side å stille dem som standard.

Stille Marginene

Hver side har fire marg: topp, venstre, bunn og høyre. Når du utformer webområdet ditt, kan du sette alle marginer å være av samme størrelse eller angi en individuell innstilling for hver margin. Marginene er målt i piksler. For å sette det samme margin for hele siden, skriv "margin: 100px;" å sette en margin på 100 piksler for alle fire sider. For å sette marger individuelt, type:

"Margin-top: 50 piksler;

margin-bottom: 75px;

margin-left: 100px;

margin-right: 100px; "

Ved hjelp av verdiene ovenfor, har toppen en 50-piksel margin, har bunnen en 75-piksel margin og både høyre og venstre side har 100-pixel marginer. All margin formatering går i ditt stilark under passende div eller under "<style>" overskriften.

padding

Tenk på padding som innsiden margin på innholdet. Padding angir hvor mye plass på div, rundt bildet, eller rundt en blokk med tekst du vil holde atskilt fra annet innhold.

padding stil

Angi padding ligner angi margene: Du har muligheten til å sette polstring rundt et element det samme for hver kant eller spesifisere hver enkelt individuelt. Skrive inni stilark, bruk "padding: 10px;" å ha en utfylling på 10 piksler rundt hver kant av ditt element for å skille det fra annet innhold. Man kan alternativt sette hver kant individuelt, for eksempel:

"Padding-top: 10px;

padding-bottom: 10px;

padding-right: 5px;

padding-left: 5px; "

Ved hjelp av innstillingene ovenfor, har du fem piksler av padding på hver side og 10 piksler fra polstring på både topp og bunn.