---
title: "Varför blir <li> 18px hög?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/156747-varför-blir-li-18px-hög"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Melea"
published: "2007-02-02T15:05:27.000Z"
updated: "2007-02-02T16:42:26.000Z"
replies: 11
views: 512
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/156747-varför-blir-li-18px-hög"
---

# Varför blir <li> 18px hög?

## #1 — Melea, 2007-02-02T15:05Z

Har en omröstning i högermenyn på en sida jag håller på att utveckla. Men det strular något fruktansvärt i IE 6(förvånad? inte jag).
Ungefär såhär ser det ut:

```
<ul style="list-style-type: none; margin: 0;">
   <li>
      <a href="#">(' . $row_answ[num_answ] . ') ' . $row_a['alternative'] . ' - ' . $votes . '%</a>
   </li>
   <li style="border: 1px solid #14718a; height: 10px; padding: 1px; margin: 3px 0;">
      <img src="images/pollbar.gif" style="width: ' . $votes . '%; height: 10px; border: 0; vertical-align: top;" alt="" />
   </li>
</ul>
```

Trots att jag har satt height till 10px på både \<li\> och \<img\> så blir höjden på \<li\>:n 18px, det blir alltså ett fult mellanrum mellan bilden (som visar hur många som röstat procentuellt) och bordern i underkant.

Någon som har en susning om varför?

Tack på förhand!

Permalänk: https://www.webforum.nu/p/156747

## #2 — tanten, 2007-02-02T15:34Z

vild gissning... IE sätter margin på img...

Permalänk: https://www.webforum.nu/p/1931891

## #3 — tanten, 2007-02-02T15:49Z

Prova med att lägga in detta i headern för en stund och se vad som händer... Förmodligen händer det mycket, så du kan ju radera det sedan.
Men då försvinner webläsarnas default-inställningar.

```
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
-->
</style>
```

Permalänk: https://www.webforum.nu/p/1931899

## #4 — silfver, 2007-02-02T15:51Z

Räcker det inte med att skriva ul, li, img{}? Det är ju ändå bara innehållet i listan som behöver ändras. :)

Permalänk: https://www.webforum.nu/p/1931901

## #5 — Melea, 2007-02-02T15:58Z

> **tanten skrev:**
>
> vild gissning... IE sätter margin på img...

Nix. :)

> **tanten skrev:**
>
> Prova med att lägga in detta i headern för en stund och se vad som händer... Förmodligen händer det mycket, så du kan ju radera det sedan.
> Men då försvinner webläsarnas default-inställningar.
>
>
> ```
> <style type="text/css">
> <!--
> *{
> margin:0;
> padding:0;
> }
> -->
> </style>
> ```

Det kör jag redan på. :)

> **silfver skrev:**
>
> Räcker det inte med att skriva ul, li, img{}? Det är ju ändå bara innehållet i listan som behöver ändras. :)

Om det nu varit \<img\>-taggen som hade marginaler på sig så hade det räckt, visst. Men det hjälper inte. :OO

Permalänk: https://www.webforum.nu/p/1931905

## #6 — tanten, 2007-02-02T15:58Z

Säkert, men eftersom han bara verkar använda inlinestyle så tänkte jag att han kunde felsöka så.
För IE räknar ju lite märkligt i bland när det gäller margin och padding och ska man räkna på antalet px i li så är de 18 med border och margin .... + eventuellt vad IE har runt bilder default... :-)

Permalänk: https://www.webforum.nu/p/1931906

## #7 — Melea, 2007-02-02T16:04Z

Såhär ser det ut i Mozilla resp. IE. :)

Bilagor:

- [1.jpg](https://www.webforum.nu/a/13610.jpg)
- [2.jpg](https://www.webforum.nu/a/13611.jpg)

Permalänk: https://www.webforum.nu/p/1931908

## #8 — Gislaved, 2007-02-02T16:23Z

10px + 1px padding top + 1px padding bottom + 3 px margin top + 3 px margin bottom = 18 pixlar.

Permalänk: https://www.webforum.nu/p/1931913

## #9 — Melea, 2007-02-02T16:29Z

> **Gislaved skrev:**
>
> 10px + 1px padding top + 1px padding bottom + 3 px margin top + 3 px margin bottom = 18 pixlar.

Padding 1px gör ju endast så det blir utrymme runt omkring bilden, och margin uppe och nere gör ju endast att utrymmet mellan bordern och texten ovan/under ökar.
Tro mig, jag har testat.  :)   ;)

Permalänk: https://www.webforum.nu/p/1931916

## #10 — tanten, 2007-02-02T16:39Z

Om du sätter height i \<li\> till auto och tar bort vertical-align: top; på bilden. Vad händer då? Tror de ska bli ungefär lika då i alla fall:-)

Permalänk: https://www.webforum.nu/p/1931920

## #11 — Melea, 2007-02-02T16:39Z

Där hade vi felet, jag satte font-size: 0; på \<li\>. Berodde antagligen på att jag hade \\n efter \<li\> och \<img\>.

Tack för alla svaren i alla fall. :)

Permalänk: https://www.webforum.nu/p/1931921

## #12 — Melea, 2007-02-02T16:42Z

> **tanten skrev:**
>
> Om du sätter height i \<li\> till auto och tar bort vertical-align: top; på bilden. Vad händer då? Tror de ska bli ungefär lika då i alla fall:-)

Gjorde ingen annan skillnad än att bilden hamnade i mitten, höjden blev fortfarande 18 pixlar. Men tack för att du la ner tid! :)

Permalänk: https://www.webforum.nu/p/1931923

---

Tråden på webben: https://www.webforum.nu/amne/html-css/156747-varför-blir-li-18px-hög