Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Margin og Polstring Gjort Enkelt | Bokmodellen og Avstand
CSS-Grunnleggende

bookMargin og Polstring Gjort Enkelt

Sveip for å vise menyen

Du vet at hvert element har innhold, polstring (padding), kantlinje (border) og marg (margin). La oss se hvordan du kan kontrollere avstand ved hjelp av disse egenskapene.

Padding

Padding lager plass inni elementet, mellom innholdet og kantlinjen.

.box {
  padding: 20px;
}

Dette gir 20px polstring på alle fire sider.

Kortform for padding

Padding kan skrives med kortform-syntaks.

Rekkefølgen på verdiene er alltid: topp → høyre → bunn → venstre

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Individuelle egenskaper for polstring

Du kan også kontrollere hver side separat:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

Margin

Margin lager plass utenfor elementet, mellom det og andre elementer.

.box {
  margin: 20px;
}

Kortform for margin

Margin følger de samme kortformreglene som polstring:

margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */

Individuelle margin-egenskaper

Kan også angis individuelt:

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

Ramme

Rammen ligger mellom polstring og margin.

Grunnleggende kortform:

border: 4px solid brown;

Dette definerer: bredde, stil, farge.

Vanlige kantlinjestiler inkluderer solid, dotted, dashed og double.

Du kan også kontrollere individuelle sider om nødvendig:

border-top: 2px solid black;

La oss se på følgende eksempel og finne ut hvilke kantlinjestiler som er mulige:

index.html

index.html

styles.css

styles.css

copy

Utdata

Note
Viktig forskjell

Padding:

  • Legger til plass inne i elementet;
  • Utvider bakgrunnsområdet.

Margin:

  • Legger til plass utenfor elementet;
  • Påvirker ikke elementets bakgrunn.

1. Hvilken side får 40px i følgende deklarasjon?

2. Hvilken egenskap legger til plass inne i et element, mellom innholdet og rammen?

question mark

Hvilken side får 40px i følgende deklarasjon?

Select the correct answer

question mark

Hvilken egenskap legger til plass inne i et element, mellom innholdet og rammen?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 2

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Seksjon 3. Kapittel 2
some-alt