Marginaler
Så här fungerar marginaler
Till varje element i HTML kan du sätta marginaler som används för att få en snygg och praktisk layout. För att enkelt åskådliggöra vad som menas med detta så använder vi oss av en stycke-tagg <p> där jag har lagt till en kantlinje.
Vad är en marginal?
Den här texten har, till skillnad från övrig text en vänstermarginal som är 40 pixlar. Avståndet räknas från gränslinjen på det div-element som den här texten ligger inom. Div-elementet är döpt till "artikelText" och är ett behållarelement som omsluter alla bilder och texter, förutom den högra menyn, på de flesta sidor på Webbdesigna.se. Det här stycket har även en toppmarginal som gör att det kommer att skapas ett mellanrum mellan detta och föregående stycke.
Det här är ett annat stycke med en marginal på 200 pixlar från div-elementets högerkant. Den vänstra marginalen är 20 pixlar.
Marginaler med inline CSS
Dessa exempel använder sig av CSS-kod som är direkt inskriven i taggarna för att formatera texten. Detta sätt att skriva kallas för inline CSS. För det mesta kommer du dock att använda dig av en stilmall som sätter upp regler för större områden på din webbsida.
Om du vill att ett element ska ha lika stora marginaler så skriver du såhär:
<p style="margin: 10px;">Ett stycke med 10px marginal</p>
Du kan, om du är lite omständig, också skriva så här:
<p style="margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left:10px;">Ett stycke med 10px marginal</p>
Det finns en mycket bra "kortvariant" som du kan använda dig av om du vill att marginalerna ska sättas olika. Detta korta sätt att skriva på utgår från topp-marginalen och sedan medsols (höger, botten, vänster) tills du har satt alla marginaler. Så här kan det se ut:
<p style="margin: 10px 20px 10px 10px">Ett stycke med 10px marginal</p>
Genom att skriva på det här sättet sparar du tid både för dig och för webbläsaren som ska tolka din kod.
Nästa artikel: Padding
