Rutmodellen: CSS inre marginal

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.