CSS-padding
Padding er den funktion, som man bruger til at bestemme afstanden mellem et objekt og en kant i fx en tabel eller en box.
Anvendelse
Alle siders mellemrum kan bestemmes individuelt med padding, men der eksisterer også flere forkortede metoder som, som også er mere simple.
Opbygning
Padding fungerer således at hvis man giver funktion 1 værdi, så bliver værdien brugt på alle fire sider. Hvis man giver 4 værdier, så kan man bestemme sidernes afstand individuelt. Hvis man giver 2 eller 3 værdier, så får de manglende værdier samme afstand som siden overfor har.
Nedenfor kan ses nogle eksempler på de enkelte metoder.
Eksempler
Ovenfor kan man se et eksempel på et objekt, hvor der ikke er specificeret nogen padding. Det er derfor at teksten går helt ud til kanten.
Padding med individuelle sider
padding-top:10px; padding-bottom:25px; padding-right:50px; padding-left:75px;
I ovenstående eksempel kan man se at der er specificeret padding til alle sider. Det vil derfor komme til at se sådan ud:
Padding - forkortet version
I den korte udgave af padding, er der en værdi som bestemmer afstanden til top og bund, og en værdi bestemmer afstanden til siderne.
padding:100px 20px;
De 100px bestemmer afstand til top og bund, og de 20px stemmer afstanden til siderne. Det vil komme til at se sådan ud:
Padding - Simpel metode
Der findes også en meget simpel metode, hvor man bestemmer alle fire siders afstand med blot en værdi, den kan bruges således:
padding:50px;
Det vil derfor komme til at se sådan ud:
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 |