För detta och alla andra stycke (P-taggen) på denna sida har följande egenskap använts: { font: 11pt Verdana }. Vissa stycken har givits en bakgrundsfärg för att visa hur egenskaper påverkar. (Prova gärna med att minska och öka bredden på fönstret.)
Ett stycke "vanlig" text.
För detta stycke används egenskapen: { margin-left: 1cm; }.
För detta stycke används egenskapen: { padding-left: 1cm; }.
För detta stycke används egenskapen: { border-left: 1cm; border-color: blue; border-style: solid; }. Vi måste ange stil för kantlinje för att kantlinjen ska visas.
För detta stycke används egenskapen: { border-left: 1cm; border-color: blue; border-style: solid; margin-left: 1cm; padding-left: 1cm; }. Detta exempel visar marginal, kantlinje och utfyllnad för vänster sida av box som alla är 1 cm.
Ett stycke "vanlig" text.
För detta stycke används egenskapen: { margin-top: -0.4cm; }. Detta visar hur detta element kan inkräkta på ovanstående elements box genom att använda en negativ övre marginal.
Ett stycke "vanlig" text.
För detta stycke används egenskapen: { border-width: 1px 0px; border-color: red; border-style: solid; padding: 3px 0px; }. Genom att bara ange 2 värden för kantlinjens bredd (1 resp. 0 pixlar) så erhålls samma bredd på motstående sida av boxen.
För detta stycke används egenskapen: { border-width: 8px 6px 4px 1px; border-color: blue red; border-style: dashed; padding: 10px; }. Genom att ange "alla" 4 värden för kantlinjens bredd (8, 6, 4 resp. 1 pixlar) så kan olika bredd på alla sidor av boxen erhållas. Används två förger för kantlinje så för motstående sidor samma förg och här har även kantlinjens typ satts till streckad (dashed). För att erhålla avstånd mellan elementet och dess kantlinje så används utfyllnad (padding).
Skapad av: Björn G.D. Persson. Uppdaterad: 2017-10-29.