---
title: "Höjd, Marginal, Padding på <pre>"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/134769-höjd-marginal-padding-på-pre"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "MickeA.com"
published: "2005-09-24T21:17:59.000Z"
updated: "2005-09-25T18:18:56.000Z"
replies: 24
views: 1139
page: 1
pages: 2
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/134769-höjd-marginal-padding-på-pre"
---

# Höjd, Marginal, Padding på <pre>

_Sida 1 av 2._

## #1 — MickeA.com, 2005-09-24T21:17Z

Tjena
Har gjort en grej där jag presenterar olika kodstycken.
Använder min av divar samt \<pre\> för att få en snygg formatering av innehållet.
Nu har jag ett litet problem, det är så att höjden på pretaggarna blir automatiskt \~30px, vilket jag inte alls vill, dom får vara MAX 15px.

Förstår inte riktigt hur jag ska lösa det här, har provat att sätta *height, line-height, padding, margin* mm på pretaggen, men utan resultat.

Det verkar nästintill omöjligt att ändra det här.

Några förslag på hur jag ska fixa det här?

Har kollat runt på det 20-tal trådar som tar upp \<pre\> taggen, men hittar ingen som tidigare tagit upp mitt problem.

Tack!

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

## #2 — Engine^, 2005-09-24T21:55Z

Istället för att använda \<pre\> kan du ta en \<span\> (eller annan praktisk) och sätta white-space:nowrap på den.

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

## #3 — zcorpan, 2005-09-24T22:17Z

```
pre { max-height:15px; margin:0; padding:0; background:lime; }
```

   :q

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

## #4 — MickeA.com, 2005-09-25T07:21Z

> **Engine^ skrev:**
>
> Istället för att använda \<pre\> kan du ta en \<span\> (eller annan praktisk) och sätta white-space:nowrap på den.

Hmm, det funkar nästan.
Det ser rätt ut, problemet blir att när man markerar allt som visas, kopierar och sen ska klistra in någonstans, så hamnar allt på en lång rad.

Radbrytningarna kommer alltså inte med, hur löser man det?

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

## #5 — zcorpan, 2005-09-25T09:37Z

> **MickeA.com skrev:**
>
> Radbrytningarna kommer alltså inte med, hur löser man det?

...med \<pre\> ;)

Jag förstår inte problemet.  :l Du kan ju sätta white-space:nowrap på \<pre\> lika gärna.

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

## #6 — MickeA.com, 2005-09-25T12:00Z

> **zcorpan skrev:**
>
> Jag förstår inte problemet.  :l Du kan ju sätta white-space:nowrap på \<pre\> lika gärna.

Ja visst kan jag det, fast då funkar det inte, "tabbstegen" som ska vara i koden finns inte då.

```
				Response.Write(	"<div id=""rad" & intID & "_" & t & """ class=""rad"">" & t + 1 & ":</div>" &_
						"<div id=""kod" & intID & "_" & t & """ class=""kodrad"" style=""background-color: " & bgColor1 & ";"">" &_
						"<pre style=""white-space: nowrap; padding-left: 5px;"">" & cRow & "</pre>" &_
						"</div>")
```

Somsagt, det blir jättebra om jag endast kör med \<pre\>, men då blir varje rad \~30px hög, vilket jag inte vill.
Om jag strunar i pretaggen och sätter white-space: pre; på diven så funkar det, men även då blir raderna för höga.

Såg gärna till om ni vill se mer kod.
Kan ju tillägga att detta skrivs ut i en loop från en array.

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

## #7 — zcorpan, 2005-09-25T12:43Z

Det verkar som du tänkt använda en \<pre\> per kodrad, vilket är väldigt onödigt. Använd en \<pre\> för hela kodstycket istället, så får du normal radhöjd. Om du vill ha stilregler för varje rad kan du använda ett annat element för det...

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>PRE</title>
  <style type="text/css">
   pre { counter-reset:i; }
   pre code.l::before { content:counter(i) ". "; counter-increment:i; }
  </style>
 </head>
 <body>
  <p>Lite exempelkod:</p>
  <pre><code class="l">function foo(bar) {</code>
<code class="l">    return (bar) ? bar : false;</code>
<code class="l">}</code></pre>
 </body>
</html>
```

 :)

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

## #8 — MickeA.com, 2005-09-25T12:54Z

Hmm, problemet är att jag har en div / rad eftersom jag har radnumrering, som man sedan ska kunna visa / dölja.

Därför måste jag ha det uppbyggt på det sätt jag har.
Fler förslag?

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

## #9 — zcorpan, 2005-09-25T13:16Z

Använd span istället för div?

Problemet är att när du lägger en block-box i en annan box som har white-space:pre, så blir det "dubbla" radbrytningar. En radbrytning för white-space:pre och en "radbrytning" för display:block.

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

## #10 — MickeA.com, 2005-09-25T13:55Z

> **zcorpan skrev:**
>
> Använd span istället för div?

Hmm, ok, har du lust att modifiera min kod ovan så det blir "rätt", är inte riktigt med i matchen.

Tack!

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

## #11 — Engine^, 2005-09-25T14:11Z

Det borde väl fungera om du omsluter \<code\>\</code\> med \<span onclick="toggleLine( this );"\>...\</span\>

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

## #12 — MickeA.com, 2005-09-25T14:15Z

> **Engine^ skrev:**
>
> Det borde väl fungera om du omsluter \<code\>\</code\> med \<span onclick="toggleLine( this );"\>...\</span\>

Nu är jag ännu mindre med i matchen.
Vad menar du med det där? "toggleLine();" är väl en funktion? Vad kommer den ifrån och vad gör den?

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

## #13 — Engine^, 2005-09-25T14:35Z

Jag menade att det är funktionen som döljer/visar den raden.

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

## #14 — MickeA.com, 2005-09-25T14:39Z

Jaha, nej, funkar inte så.
Hade tänkt att det ska bli såhär:

```
 1.     <html>
 2.          <head>
 3.               <title>Test</title>
 4.          </head>
 5.     </html>
```

Sen ska man kunna ta bort radnumreringen, dvs. dölja de divarna, alla eller inga.
Problemet är som sagt endast hur jag ska få till ev. tabbsteg och mellanslag i min utskrft.

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

## #15 — zcorpan, 2005-09-25T15:06Z

Det är för övrigt exakt mitt kodexempel gör i #7, bortsett från att det inte fungerar i IE. ;)

Anyway, jag har sett det lösas genom att använda en \<ol\> också:

```
<ol>
 <li><pre>&lt;html&gt;</pre></li>
 <li><pre> &lt;head&gt;</pre></li>
 <li><pre>  &lt;title&gt;Test&lt;/title&gt;</pre></li>
 <li><pre> &lt;/head&gt;</pre></li>
 <li><pre>&lt;/html&gt;</pre></li>
</ol>
```

```
ol pre { margin:0; }
```

 :)

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

## #16 — Engine^, 2005-09-25T15:15Z

Men hur gör man då för att dölja radnumren?

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

## #17 — MickeA.com, 2005-09-25T15:19Z

Men det här måste gå att lösa på nått annat sätt.
Tex, Php-Portalen har ju samma princip med radnummer och \<pre\> och allt och det funkar i alla webläsare så vitt jag vet.

Konstigt?

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

## #18 — MickeA.com, 2005-09-25T16:48Z

Nu har jag fått till det halvdant, det funkar nästan som jag vill.
Nu är det bara en sak som återstår, jag använder pasern "colorCode" från Pellesoft för att färglägga aspkoden.
Använder jag mig av den, så blir raderna 30px höga, använder jag den inte blir det rätt.
Alltså måste felet finns i den filen.

Tidigare så lade den till *\<font color="färgen"\>sak att färglägga\</font\>* i koden när det fanns något att färglägga.
Men det gillade inte validatorn av någon anledning, så ändrade alla \<font\> till \<span style=""\>.
Kan det ha med höjdproblemet att göra?

Skicka med filen if. nån vill ta en titt.

Bilagor:

- [colorcode.zip](https://www.webforum.nu/a/7889.zip)

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

## #19 — Engine^, 2005-09-25T17:06Z

Har inget speciellt med funktionen att göra utan det beror på hur din css ser ut.

Har du möjlighet att lägga upp en länk till hur det ser ut nu?

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

## #20 — MickeA.com, 2005-09-25T17:11Z

Här är en länk:
<http://mickea.gotdns.org/_asp/paste2/default.asp?p=show&pId=295>

Ska tillägga att jag inte använder aspparsern i exemplet ovan.
Då ser du att det ser "bra" ut.

Använder jag därimot den, dvs. massa \<span\>\</span\> läggs till, då blir raderna för höga.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/134769-höjd-marginal-padding-på-pre  
Nästa sida: https://www.webforum.nu/amne/html-css/134769-höjd-marginal-padding-på-pre/page2.md
