CSS inre marginaler

Innermarginalen för detta element är 70px.

CSS inre marginaler

CSS padding Egenskapen används för att skapa utrymme runt elementinnehållet inom definierade gränser.

Genom CSS kan du helt kontrollera innermarginalen (fyllning). Vissa egenskaper kan sätta innermarginaler för varje sida (överst, höger, nedre och vänster) av ett element.

Padding - Enkel sida

CSS har egenskaper för att specificera innermarginaler för varje sida av ett element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Alla innermarginalattribut kan sättas till följande värden:

  • length - Ange innermarginalen i enheter som px, pt, cm m.m.
  • % - Specificera innermarginalen som en procentandel av inkluderande elementets bredd
  • inherit - Specificera att innermarginalen ska härledas från förälementet

Tips:Negativa värden är inte tillåtna.

Exempel

Ange olika innermarginaler för alla fyra sidor av <div>-elementet:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Prova själv

Padding - Förkortningsegenskap

För att minska koden kan alla innermarginalattribut specificeras i ett egenskap.

padding Egenskapen är en förkortning av följande inre marginalt egenskaper:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Arbetssättet är sådant här:

Om padding Egenskapen har fyra värden:

  • padding: 25px 50px 75px 100px;
    • Övre inre marginalt är 25px
    • Höger inre marginalt är 50px
    • Nedre inre marginalt är 75px
    • Vänster inre marginalt är 100px

Exempel

Använd en padding-förkortningsegenskap som har satts till fyra värden:

div {
  padding: 25px 50px 75px 100px;
}

Prova själv

Om padding Egenskapen har satts till tre värden:

  • padding: 25px 50px 75px;
    • Övre inre marginalt är 25px
    • Höger och vänster inre marginalt är 50px
    • Nedre inre marginalt är 75px

Exempel

Använd en padding-förkortningsegenskap som har satts till tre värden:

div {
  padding: 25px 50px 75px;
}

Prova själv

Om padding Egenskapen har satts till två värden:

  • padding: 25px 50px;
    • Övre och nedre inre marginalt är 25px
    • Höger och vänster inre marginalt är 50px

Exempel

Använd en padding-förkortningsegenskap som har satts till två värden:

div {
  padding: 25px 50px;
}

Prova själv

Om padding Egenskapen har satts till ett värde:

  • padding: 25px;
    • Alla fyra inre marginalt är 25px

Exempel

Använd en padding-förkortningsegenskap som har satts till ett värde:

div {
  padding: 25px;
}

Prova själv

Inre marginalt och elementets bredd

CSS width Egenskapen specificerar bredden på elementets innehållsområde. Innehållsområdet är den inre marginalt, ramen och marginalt inom elementet (box-modellen).

Därför, om ett element har ett specificerat bredd, läggs till inre marginalt till det totala bredden på elementet. Detta är ofta inte det önskade resultatet.

Exempel

Här är bredden på <div>-elementet 300px. Men, det faktiska bredden på <div>-elementet kommer att vara 350px (300px + vänster inre marginalt avstånd 25px + höger inre marginalt avstånd 25px):

div {
  width: 300px;
  padding: 25px;
}

Prova själv

Om du vill behålla bredden på 300px, oavsett fyllnadsgrad, kan du använda box-sizing Egenskapen kommer att leda till att elementet behåller sin bredd. Om du ökar inre marginalt, minskar det tillgängliga innehållsrymden.

Exempel

Använd egenskapen box-sizing för att behålla bredden på 300px, oavsett fyllnadsgrad:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Prova själv

Mer exempel

Ställ in vänstra inre marginalt avstånd
Detta exempel visar hur du ställer in vänstra inre marginalt avstånd för <p>-elementet.
Ställ in högra inre marginalt avstånd
Detta exempel visar hur du ställer in högra inre marginalt avstånd för <p>-elementet.
Ställ in övre inre marginalt avstånd
Detta exempel visar hur du ställer in övre inre marginalt avstånd för <p>-elementet.
Ställ in nedre inre marginalt avstånd
Detta exempel visar hur du ställer in nedre inre marginalt avstånd för <p>-elementet.

Alla CSS inre marginalt egenskaper

Egenskap Beskrivning
padding En förkortningsegenskap för att ställa in alla inre marginalt egenskaper i en enda deklaration.
padding-bottom Ställ in elementets nedre inre marginalt avstånd.
padding-left Ställ in elementets vänstra inre marginalt avstånd.
padding-right Ställ in elementets högra inre marginal.
padding-top Ställ in elementets övre inre marginal.

Fortsatt läsning

Extra böcker:Rutmodell: CSS inre marginal