Negativa marginaler

negative_margins_1I CSS är det tillåtet att även använda sig av negativa marginalvärden, d.v.s. ett värde där talet inleds med ett minustecken. Men när är det då befogat eller användbart att tilldela en marginal som är mindre än den förinställda?

Här går jag igenom ett par exempel när detta faktiskt kan vara en lösning.

Knuffa block utanför DIV-gräns

All sidlayout byggs upp av rektangulära s.k. boxar. Oavsett vilken form innehållet i en bakgrundsbild har, så finns ingen annan form på sektioner och div’s än just rektangulär.

Exemplet nedan visar ett exempel på två div-block som ligger kant i kant (en undersida och en översida möts). I just den här bilden har den övre bakgrundsbilden en annan form än rektangulär. Man tycker då kanske att det skulle se trevligare ut om innehållet i sektionen under placerades högre upp? Nu inträffar dock inte detta, eftersom det hela tiden är rektanglar vi har att göra med.

negative_margins_1

Genom att i det här fallet låta text- eller bildblockets övre marginal bli negativ, kommer det att flyttas uppåt, utanför sin div-gräns. Ju större minusvärde (lägre värde) desto högre upp flyttas blocket.

negative_margins_2

Avstånd ovanför och under stycken

I de fall där du inte tycker dig kunna använda padding i ett div-block, kan negativa marginaler också vara en lösning när du ställer in avståndet ovanför och efter stycken inuti div-blocket.

Ett exempel är om du vill att avståndet ovanför översta stycket ska vara större än mellan alla efterföljande stycken. I exemplet nedan kommer den större övre marginalen att ge samma avstånd ovanför översta stycket som mellan de övriga.

p { margin:20px 0 10px 0 }

Sätter du istället den nedre marginalen till -10px kommer den att ”äta upp” en bit av den övre marginalen på de ställen där det kommer ett nytt stycke efter. Eftersom den övre marginalen fortfarande är 20px, gäller den för det stycke som ligger överst.

p { margin:20px 0 -10px 0 }

OBS! I fall du inte visste det redan så visar exemplet ovan blockets fyra sidor i ordningen top, right, bottom och left. Tänk TRouBLe, så har du den ordning i vilken marginaler, utfyllnad och kantlinjer anges i den sammandragna formen.

Med ledning av de här exemplen kan du säkert hitta fler tillfällen när negativa marginaler är användbart.

Tid 2009-06-29 (16:07) Kategori Webbdesign och webbutveckling

Inga relaterade inlägg finns.

Dela med dig:

Kommentera inlägget