CSS-margin
Margin definerer en form for usynlig ydre grænse for et objekt, hvor andre objekter ikke kan befinde sig.
Brug
Margin defineres ved hjælp af margin-egenskaben i CSS og kan bruges på to måder: Enten ved at give hver side en margin individuelt eller ved at bruge "shorthand"-egenskaben.
Individuelle Sider
Man kan definere hver sides margin individuelt ved at bruge egenskaberne margin-top, -bottom, -left og -right
Eksempel
CSS
p.margin
{
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:5px;
}
HTML
<p>Tekst uden margin</p> <p class="margin">Tekst med margin</p>
Resultat
"Shorthand"-metoden
Det er muligt at skrive alle sine margins op på en linje. Dette gør man ved hjælp af margin. På denne måde kan man vælge at skrive mellem 1 og 4 værdier, alt efter hvor mange forskellige marginer man vil have.
Eksempler
margin:10px;
Alle fire margins har en værdi på 10px.
margin:10px 5px;
Øverste og nederste margin har en værdi på 10px. Højre og venstre margin har en værdi på 5px.
margin:20px 10px 5px;
Øverste margin har en værdi på 20px. Højre og venstre margin har en værdi på 10px. Nederste margin har en værdi på 5px.
margin:20px 5px 10px 15px
Øverste margin har en værdi på 20px. Højre margin har en værdi på 5px. Nederste margin har en værdi på 10px. Venstre margin har en værdi på 15px.
Eksterne henvisninger
| Webdesign | |
|---|---|
| CSS | Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
| HTML | <b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere |