CSS-boksmodellen
Grundprincippet i boksmodellen
Boksmodellen er en simpel visualisering af de fire områdetyper: Content, padding, border og margin. Oversat til dansk hedder de indhold, fyld, kant og margin. Denne model er nem at bruge når man skal opstille sine div-Tags, men kan også bruges til alle andre tags. Man kan endda sætte en margin på et link hvis det er det man vil. Modellen viser hvilken vej, hvorhenne og på hvilken side af kanten der bliver udvidet.
De forskellige attributter hænger sammen ved at danne afstand på forskellige sider af teksten og HTML-blokkens kant. Content/indhold er selve teksten som optager noget plads. Hvis man forestiller sig at man har noget tekst i en boks med en kant, kan det nemt komme til at se mærkeligt ud:
Border er selve kanten og her opstår et dilemma: Internet Explorer vælger, som den eneste browser, at medregne kanten i en HTML-bloks størrelse, hvorimod alle andre browsere er enige om at selve blokken ikke er større end indholdet og fyldet. Dette kan skabe misformede hjemmesider I Internet Explorer, men problemet kan løses ved hjælp af position-attributten.
Til sidst er der margin, som mange kender fra diverse skriveprogrammer såsom Microsoft Word. Margin er den plads der skal være mellem kantens yderside og objektet ved siden af. Det er typisk nemt at finde eksempler på margin, men hvis man ikke selv har opstillet hjemmesiden kan det være svært at se hvad der er padding og hvad der er margin, eftersom begge dele ender med at ligge side om side når man har div inde i en div.
| 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 |