I den här artikeln går vi igenom marginaler, deras funktion och hur vi anger marginaler med CSS.
Vad är egentligen en marginal?
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.
Marginaler med extern CSS
Marginaler används överallt på din sajt för exempelvis stycken och därför är det nödvändigt att ge ett exempel på hur det skulle kunna se ut i din externa CSS-fil.
div#artikeltext p {
margin-top: 0;
margin-right: 40px;
margin-bottom: 20px;
margin-left: 40px;
}
Deklarationerna är ganska självförklarande. Stycket kommer inte att ha någon egen toppmarginal till föregående element, men väl en högermarginal, en bottenmarginal och en vänstermarginal.
Vi hade även kunnat skriva dessa deklarationer förkortat med:
div#artikeltext p {
margin: 0 40px 20px 40px;
}
När du använder dig av kortformen för marginaler så avser första värdet topp, andra värdet höger, tredje värdet botten och fjärde värdet vänster.
Margaler med inline CSS
Ibland lägger man till småsaker som man kanske bara kommer att använda en gång och därför är det inte så noga med att lägga in deklarationerna i den externa stilmallen.
Till höger har jag därför lagt in en textbox som visar att jag använt mig av en vänstermarginal till texten som omgärdar den.
Kod för detta (innefattar fler egenskaper än marginaler):
<div style="width: 120px; height: 120px; margin-left: 20px; float: right; padding: 10px; background-color:yellow; font-size:12px;">
<<< Egenskaper || Marginaler >>>
