Bokse-model: CSS Margin
Det tomrum, der omgiver elementets kantlinje, er marginen. At sætte marginer opretter yderligere 'tomrum' uden for elementet.
Den enkleste måde at sætte marginer på er ved at bruge margin-attributten, som accepterer enhver længdeenhed, procenter eller endda negative værdier.
CSS margin 属性
Den enkleste måde at sætte marginer på er ved at bruge Margin-attributten.
Margin-attributten accepterer enhver længdeenhed, som kan være pixels, inches, millimeter eller em.
Margin kan sættes til auto. En mere almindelig praksis er at angive længdeværdier for marginer. Følgende deklaration sætter 1/4 tomme bredde tomrum på h1-elementets kanter:
h1 {margin : 0.25in;}
Dette eksempelet viser, hvordan h1-elementets fire kanter har forskellige marginer, og længdenheden er pixels (px):
h1 {margin : 10px 0px 15px 5px;}
Som med indre marginer er rækkefølgen af værdierne fra øvre margin (top) og kører rundt om elementet medurs.
margin: top right bottom left
Desuden kan du også specificere en procentværdi for margin:
p {margin : 10%;}
Procentværdier beregnes i forhold til forældrelæsens width. I dette eksempel er den margin, der er sat for p-elementet, 10% af forældrelæsens width.
Standardværdien for margin er 0, så hvis ingen værdi er specificeret for margin-deklarationen, vil der ikke være nogen margin. Men i praksis tilbyder browseren for mange elementer foruddefinerede stilarter, og margin er ikke undtaget. For eksempel genererer en browser med støtte til CSS en 'tom linje' ovenover og under hver afsnitselement. Derfor kan en browser muligvis anvende en margin selv uden en p-deklaration. Selvfølgelig vil en specifik deklaration overrive standardstilen.
Værdikopiering
Kommer du i tanke på? Vi nævnte tidligere i de to første afsnit værdikopiering. Når vi nu forklarer, hvordan du bruger værdikopiering.
Nogle gange indtaster vi nogle gentagne værdier:
p {margin: 0.5em 1em 0.5em 1em;}
Gennem værdikopiering behøver du ikke at indtaste disse tal gentagne gange. De nævnte regler er ligeværdige med nedenstående regel:
p {margin: 0.5em 1em;}
Disse to værdier kan erstatte de foregående 4 værdier. Hvordan gør man det? CSS definerer nogle regler, der tillader at specificere margin med færre end 4 værdier. Reglerne er som følger:
- Hvis værdien for venstre margin mangler, bruges værdien for højre margin.
- Hvis værdien for nedre margin mangler, bruges værdien for øvre margin.
- Hvis værdien for højre margin mangler, bruges værdien for øvre margin.
Nedenstående illustration giver en mere intuitiv måde at forstå dette på:
I stedet for, hvis 3 værdier er specificeret for margin, kopieres den 4. værdi (venstre margin) fra den 2. værdi (højre margin). Hvis der er to værdier givet, kopieres den 4. værdi fra den 2. værdi, og den 3. værdi (nedre margin) kopieres fra den 1. værdi (øvre margin). I sidste ende, hvis kun én værdi er specificeret, kopieres de øvrige 3 marginer fra denne værdi (øvre margin).
Ved at bruge denne enkle mekanisme skal du kun specificere de nødvendige værdier, og ikke nødvendigvis alle 4 værdier, for eksempel:
h1 {margin: 0.25em 1em 0.5em;} /* Lige med 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} /* Lige med 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* Lige med 1px 1px 1px 1px */
Denne metode har en lille ulempe, og du vil bestemt støde på dette problem. Antag, at du vil sætte p-elementets øvre og venstre margin til 20 pixels og bunden og højre margin til 30 pixels. I dette tilfælde skal det skrives som:
p {margin: 20px 30px 30px 20px;}
Så får du den ønskede effekt. Desværre kan antallet af nødvendige værdier ikke reduceres.
Lad os se på et andet eksempel. Hvis du vil have alle margener undtagen venstre margin som auto (venstre margin er 20px):
p {margin: auto auto auto 20px;}
Samme, så får du den ønskede effekt. Problemet er, at det er besværligt at skrive disse auto. Hvis du kun vil kontrollere elementets enlige kanter, brug enkelt-sidede marginegenskaber.
Enkeltsidet marginegenskab
Du kan bruge enkelt-sidede marginegenskaber til at sætte værdier for elementets enlige kanter. Antag, at du vil sætte p-elementets venstre margin til 20px. Du behøver ikke bruge margin (kræver mange auto), men kan bruge følgende metode:
p {margin-left: 20px;}
Du kan bruge en af følgende egenskaber til kun at sætte den relevante margen uden at påvirke alle andre margener:
Du kan bruge flere af disse enkelt-sidede egenskaber i en regel, for eksempel:
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
Selvfølgelig kan det være lettere at bruge margin i dette tilfælde:
p {margin: 20px 30px 30px 20px;}
Uanset om du bruger en enkelt-sidede egenskab eller margin, får du det samme resultat. Generelt set er det lettere at bruge margin til at sætte margen for flere kanter. Dog er det faktisk ligegyldigt, hvilken metode du bruger fra dokumentvisningens synspunkt, så vælg den metode, der er nemmest for dig.
Tips og kommentarer
Tip:Netscape og IE definerer standardmargenen (margin) for body-tagen som 8px. Ikke så med Opera. Til gengæld definerer Opera standardindrykning (padding) som 8px, så hvis du vil justere hele websites kantdele og vise dem korrekt i Opera, skal du bruge en brugerdefineret padding til body.
CSS margin eksempel:
- Indstil teksts venstre ekstrem margin
- 本例演示如何设置文本的左外边距。
- 设置文本的右外边距
- 本例演示如何设置文本的右外边距。
- 设置文本的上外边距
- 本例演示如何设置文本的上外边距。
- 设置文本的下外边距
- 本例演示如何设置文本的下外边距。
- 所有的外边距属性在一个声明中。
- 本例演示如何将所有的外边距属性设置于一个声明中。
CSS 外边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
