> For the complete documentation index, see [llms.txt](https://jens-andreasson.gitbook.io/webbutveckling/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jens-andreasson.gitbook.io/webbutveckling/css/viktigt.md).

# Mått och värden

## Pixlar

Måttenheten px i CSS anger måttet i pixlar. Måttenheten är statisk och exakt.

{% tabs %}
{% tab title="CSS" %}

```css
img {
    width: 32px;
    height: 32px;
}

html {
    font-size: 16px;
}

h1 {
    border-bottom: 1px solid gray;
}
```

{% endtab %}
{% endtabs %}

## Procent

I många fall så används procent som måttenhet i CSS, det kan till exempel vara för att ange att ett element ska vara 100% brett eller 60% av ett fönsters bredd.

{% hint style="info" %}
Kom ihåg att elementets % beräknas utifrån dess förälder(engelska parent). Ett element med w-100 blir 100% av sin förälder, så om föräldern har w-50 så blir barn-elementet 100% av 50%.
{% endhint %}

{% tabs %}
{% tab title="CSS" %}

```css
.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

main {
    width: 80%;
    margin: 0 auto;
}
```

{% endtab %}

{% tab title="HTML" %}

```markup
<main>
    <h1>80% av webbläsarfönstret</h1>
    <div class="w-100">
        <h2>100% bred, men bara 80% av fönstret</h2>
        <p>Eftersom den ligger i main elementet.</p>
    </div>
</main>
```

{% endtab %}
{% endtabs %}

Undvik procent när du skalar text till exempel, då det ger dig väldigt lite kontroll över hur faktiskt stor texten blir.

## Root EM

REM är ett måttvärde i CSS. Det utgår från root elementets font-storlek för att sätta storleken på element.

Värdet skrivs som nedan för att till exempel sätta storleken på texten och det kommer utgå från HTML-elementets textstorlek, vilket som oftast är 16px.

{% tabs %}
{% tab title="CSS" %}

```css
p {
    font-size: 1rem;
}
```

{% endtab %}
{% endtabs %}

Om du anger detta på en sida så kan du sedan inspektera uträknade värden i webbläsarens utvecklingsverktyg. Se Fig 1.

![Fig 1, Computer font-size of 4 rem.](https://1362728162-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7gYn7z0M1o4ycR0mPi%2F-MKdZsDANPU2dtYllMO0%2F-MKdaptWl6pDVnIkFtPk%2Fdev-comp.png?alt=media\&token=ae410508-61c5-4dd9-80da-4697c5916374)

Försök i största möjliga mån använda REM som måttenhet då det tillåter användaren att ändra fontstorlek, till skillnad från pixlar.

För att räkna ut storleken i pixlar från rem så kan du använda pixlar \* rem = faktisk storlek i pixlar, så om du använder 0.5rem så blir storleken 8px. Om du vet pixelstorleken och vill räkna ut storleken i rem använder du storlek i pixlar / 16 = rem.