Rutmodellen: CSS inre marginal
- Föregående sida Översikt över CSS rammodell
- Nästa sida CSS kant
Elementets inre marginal är mellan ramen och innehållsområdet. Den enklaste egenskapen för att kontrollera detta område är padding-attributet.
CSS padding-attribut definierar det tomma utrymmet mellan elementets kant och dess innehåll.
CSS padding-attribut
CSS padding-attribut definierar elementets inre marginal. Padding-attributet accepterar längdvärden eller procentvärden, men tillåter inte negativa värden.
Till exempel, om du vill att alla h1-elementens sidor ska ha 10 pixlar inre marginal, behöver du bara göra så här:
h1 {padding: 10px;}
Du kan också sätta inre marginaler för varje sida i ordningen övre, höger, nedre och vänster, och varje sida kan använda olika enheter eller procentvärden:
h1 {padding: 10px 0.25em 2ex 20%;}
Ensidiga inre marginaler
Också genom att använda följande fyra enskilda egenskaper, ställ in övre, högra, nedre och vänstra inre marginaler respektive:
Du kanske redan har tänkt på det, men de regler som följer ger samma effekt som de föregående förkortade reglerna:
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
Procentvärden för inre marginaler
Som nämndes tidigare kan man ställa in procentvärden för elementets inre marginaler. Procentvärden beräknas i förhållande till föräldrelementets bredd, vilket är samma som för marginaler. Så om föräldrelementets bredd ändras, ändras också de.
Nedanstående regel ställer in paragrafens inre marginal till 10% av föräldrelementets bredd:
p {padding: 10%;}
Till exempel: om en paragraphs föräldrelement är en div-element, så ska dess inre marginaler baseras på div:ens bredd.
<div style="width: 200px;"> <p>This paragraph is contained within a DIV that has a width of 200 pixels.</p> </div>
Observera:Övre och nedre inre marginaler är desamma som vänstra och högra inre marginaler; dvs. procentandelen för övre och nedre inre marginaler sätts i förhållande till föräldrelementets bredd, inte höjd.
CSS inre marginal exempel:
- Alla inre marginaler i en deklaration
- Detta exempel visar hur man använder förkortade egenskaper för att ställa in alla inre marginaler i en deklaration, vilket kan vara ett till fyra värden.
- Ställ in nedre inre marginalen till 1
- Detta exempel visar hur man använder centimetervärden för att ställa in cellens nedre inre marginal.
- Ställ in nedre inre marginalen till 2
- Detta exempel visar hur man använder procentvärden för att ställa in cellens nedre inre marginal.
- Ställ in vänstra inre marginalen till 1
- Detta exempel visar hur man använder centimetervärden för att ställa in cellens vänstra inre marginal.
- Ställ in vänstra inre marginalen till 2
- Detta exempel visar hur man använder procentvärden för att ställa in cellens vänstra inre marginal.
- Ställ in högra inre marginal 1
- Detta exempel visar hur man använder centimetervärden för att ställa in cellens högra inre marginal.
- Ställ in högra inre marginal 2
- Detta exempel visar hur man använder procentvärden för att ställa in cellens högra inre marginal.
- Ställ in övre inre marginal 1
- Detta exempel visar hur man använder centimetervärden för att ställa in cellens övre inre marginal.
- Ställ in övre inre marginal 2
- Detta exempel visar hur man använder procentvärden för att ställa in cellens övre inre marginal.
CSS inre marginal egenskap
Egenskap | Beskrivning |
---|---|
padding | Kortformad egenskap. Används för att i en deklaration ställa in elementets alla inre marginal egenskaper. |
padding-bottom | Ställ in elementets nedre inre marginal. |
padding-left | Ställ in elementets vänstra inre marginal. |
padding-right | Ställ in elementets högra inre marginal. |
padding-top | Ställ in elementets övre inre marginal. |
- Föregående sida Översikt över CSS rammodell
- Nästa sida CSS kant