Kursplan

CSS-avancerade kurser

• CSS extra bok
• CSS introduktion
• CSS grundläggande syntax
• CSS avancerad syntax
• CSS avledningsval
• CSS id-val
• CSS klassval
• CSS skapande
• CSS bakgrund
• CSS text
• CSS typsnitt
• CSS lista

CSS-rutmodell

• Översikt över CSS rammodell
• CSS inre marginal
• CSS kant
• CSS yttre marginal
• CSS marginalkombination

CSS-positionering

• Översikt över CSS positionering
• CSS relativ positionering
• CSS absolut positionering
• CSS flytande

CSS-seletorer

• CSS elementval
• CSS valgruppering
• Detaljerad förklaring av CSS klassval
• Detaljerad förklaring av CSS ID-val
• Detaljerad förklaring av CSS egenskapsval
• CSS efterkommande val
• CSS underordnad elementval
• CSS nära syskonval

Valfria kurser

Kursrekommendationer:

• CodeW3C.coms magiskask

Det tomma området runt elementets kant är marginalen. Att ställa in marginaler skapar extra 'tomrum' utanför elementet.

Det enklaste sättet att ställa in marginaler är att använda marginalattributet, som accepterar alla längdenheter, procentvärden och negativa värden.

CSS margin-attribut

Det enklaste sättet att ställa in marginaler är att använda Marginalattributet.

Marginalattributet accepterar alla längdenheter, som pixlar, tum, millimeter eller em.

Marginal kan ställas in till auto. Vanligare är att använda längdvärden för marginaler. Följande deklaration sätter 1/4 tum breda tomrum på alla sidor av h1-elementet:

h1 {marginal: 0.25in;}

Följande exempel definierar de fyra sidorna av h1-elementet med olika marginaler, använda längdenheter är pixlar (px):

h1 {marginal: 10px 0px 15px 5px;}

Liksom med inställningar för inre marginaler är ordningen på dessa värden från övre marginal (top) och rör sig klockvis runt elementet:

margn: top right bottom left

Du kan också ange en procentuell värde för margn:

p {margn: 10%;}

Procent är beräknade relativt till föräldrelementets bredd. I detta exempel är marginalen för p-elementet 10% av föräldrelementets bredd.

Standardvärdet för margn är 0, så om inget värde har angetts för margn, kommer ingen marginal att visas. Men i praktiken tillhandahåller webbläsarena för många element fördefinierade stilar, inklusive marginaler. Till exempel genererar en webbläsare en "tom rad" ovanför och under varje element som stöder CSS, inklusive marginaler. Därför kan en webbläsare tillämpa en marginal på ett p-element om ingen marginal har angetts för det. Naturligtvis kommer en specifik deklaration att överskrida standardstilen.

Värdekopiering

Kom ihåg? Vi nämnde värdekopiering i de två första avsnitten. Nu förklarar vi hur du använder värdekopiering.

Ibland anger vi några upprepade värden:

p {margn: 0.5em 1em 0.5em 1em;}

Genom värdekopiering behöver du inte upprepa dessa siffror. Regeln ovan är likvärdig med följande regel:

p {margn: 0.5em 1em;}

Dessa två värden kan ersätta de tidigare 4 värdena. Hur gör man detta? CSS definierar några regler som tillåter att mindre än 4 värden används för marginaler. Reglerna är följande:

• Om värdet för vänster marginal saknas, används värdet för höger marginal.
• Om värdet för nedre marginal saknas, används värdet för övre marginal.
• Om värdet för höger marginal saknas, används värdet för övre marginal.

Nedan visas en mer intuitiv metod för att förstå detta:

I andra ord, om 3 värden har angetts för marginalen, kommer det fjärde värdet (dvs. vänster marginal) att kopieras från det andra värdet (höger marginal). Om två värden har angetts, kommer det fjärde värdet att kopieras från det andra värdet, och det tredje värdet (nedre marginal) kommer att kopieras från det första värdet (övre marginal). I den sista situationen, om endast ett värde har angetts, kommer de andra 3 marginalerna att kopieras från detta värde (övre marginal).

Genom att använda detta enkla mekanism behöver du endast ange nödvändiga värden, utan att tillämpa alla 4 värden, till exempel:

h1 {margn: 0.25em 1em 0.5em;}	/* liknar 0.25em 1em 0.5em 1em */
h2 {margn: 0.5em 1em;}	/* liknar 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* Ekvivalent till 1px 1px 1px 1px */

Detta sätt har en liten nackdel, du kommer säkert att möta detta problem. Anta att du vill ställa in övre och vänstra marginaler för p-elementet till 20 pixlar, nedre och högra marginaler till 30 pixlar. I detta fall måste det skrivas:

p {margin: 20px 30px 30px 20px;}

På detta sätt får du den effekt du vill ha. Tyvärr kan det inte vara färre värden som behövs i detta fall.

Titta på ett annat exempel. Om du vill att alla marginaler utom vänster marginalen ska vara auto (vänster marginal är 20px):

p {margin: auto auto auto 20px;}

På samma sätt kan du få den effekt du vill ha. Problemet är att skriva dessa auto kan vara besvärligt. Om du bara vill kontrollera marginalen på en ensidig kant på ett element, använd ensidiga marginal egenskaper.

Ensidiga marginal egenskaper

Du kan använda ensidiga marginal egenskaper för att ställa in marginaler för en ensidig kant på ett element. Anta att du vill ställa in vänster marginal för p-elementet till 20px. Använd inte margin (kräver mycket auto), utan använd följande metod:

p {margin-left: 20px;}

Du kan använda följande egenskaper för att bara ställa in marginaler för den aktuella sidan utan att påverka alla andra marginaler:

• margin-top
• margin-right
• margin-bottom
• margin-left

Du kan använda flera ensidiga egenskaper i en regel, till exempel:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Naturligtvis kan det vara lättare att använda margin i detta fall:

p {margin: 20px 30px 30px 20px;}

Oavsett om du använder ensidiga egenskaper eller margin, får du samma resultat. Generellt sett är det lättare att använda margin om du vill ställa in marginaler för flera sidor. Men från dokumentationsvisningens synvinkel spelar det ingen roll vilket sätt du använder, så välj det som är lättare för dig.

Tips och kommentarer

Tips:Netscape och IE definierar standardmarginalvärdet (margin) för body-taggen som 8px. Men inte Opera. Istället definierar Opera standardvärdet för inre fyllning (padding) som 8px, så om du vill justera kanterna på hela webbplatsen och visa dem korrekt i Opera, måste du anpassa padding för body.

CSS yttre marginalattribut

Verktygslåda

CSS referenshandbok

CSS-exempel

CSS-test

CSS-tutorial

Sponsorerlänkar