CSS-padding

Fra HTX Arduino
Spring til navigation Spring til søgning

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

Ingenpadding.jpg

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:

Paddingindividuel.jpg


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:

Paddingkort.jpg


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:

Paddingsimpel.jpg

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