[coredev]

Ursprungligen postat av bird200

Jag har ett designproblem på min hemsida. Jag har en bild ovanför en rubrik och när jag lägger in <br><br> mellan rubriken och bilden blir avståendet för stort och när jag skriver <br> så blir avståendet för litet.

Finns det någon annan kod som liknar <br><br> som gör avståendet lite mindre? Kan man skriva något som typ <br size="70%"><br size="70%"> (just denna kod finns ju inte, men kanske finns någon liknande?

I princip så skall man aldrig använda <br /><br />. Varför inte undrar du... Jo för att börja basic, en sjysst markup bygger man upp såhär:

<h1>Rubrik</h1>
<p>Detta är det första stycket, och genom att omsluta text med p-taggen så får jag ett snyggt upplägg på min markup.</p>
<p>Detta är det andra stycket, här vill jag citera något och då vill jag tvinga fram en ny rad<br />
- XHTML är bra, säger folk på sta'n.</p>

Sedan fixar du marginaler & padding i din css-mall:

h1 { margin-bottom: 10px; }
p { margin-top: 2px; margin-bottom: 10px; padding-bottom: 5px; }

Du kan även (istället / som komplement till att lägga stilarna i din css-mall) använda style-taggen på markup-elementet:

<h1 style="margin-bottom: 10px;">Rubrik</h1>
<p style="margin-top: 2px; margin-bottom: 10px; padding-bottom: 5px;">Detta är det första stycket, och genom att...</p>

Genom att anävnda <p>...</p><p>...</p> för att dela upp din text i stycken istället för att köra <br /><br /> och man kan väl enkelt säga att det är så (x)html är tänkt att användas. Även Word funkar så nuförtiden. Tycker du enter så får du inte en radbrytning utan ett nytt stycke.

Så för att svara på din fråga, skulle du vilja öka avstånded mellan t.ex. en rubrik och en bild så kan du göra enligt följande:

<h1 style="margin-bottom: 10px;">Rubrik</h1>
<img src="/min/bild.jpg" alt="Min Bild" style="margin-top: 20px; " />

Där kan du pilla på margin-top och margin-bottom så det passar dig. Detta sätt är mycket bättre för webbläsaren och så mycket mer logiskt för dig när du väl har gått över till det sättet att jobba.