Margini și spațieri în web design

Aceste concepte înrudite vă permit să controlați cantitatea de spațiu dintre conținutul dvs. și containerul său și dintre container și obiectele din jurul acestuia. Spațierea (padding) controlează cantitatea de spațiu din interiorul containerului, de exemplu, între text și un set de etichete de paragraf. Vă puteți aminti spațierea la interior, gândindu-vă la o cameră capitonată; căptușeala este eficientă numai dacă se află pe interiorul pereților.

Adăugând margini la paragrafele noastre, așa cum am făcut mai sus, putem vedea conturul unde se încadrează paragraful în pagina noastră. Acum, vom vedea diferența atunci când aplicăm spațierea:

<style>
p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:groove;
border-width:medium;
}
p.three {
border-style:dotted;
border-width:1px;
border-color:red;
}
p {padding:10px;}
</style>
<p class="one">Some text.</p>
<p class="two">Some more text.</p>
<p class="three">Even more text.</p>

Veți observa că paragrafele încă nu s-au mutat unul față de celălalt, fiecare pur și simplu ocupă mai mult spațiu. Pentru a le îndepărta mai mult unul de celălalt, putem adăuga o margine:

<style>
p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:groove;
border-width:medium;
}
p.three {
border-style:dotted;
border-width:1px;
border-color:red;
}
p {padding:10px;}
p {margin:50px;}
</style>
<p class="one">Some text.</p>
<p class="two">Some more text.</p>
<p class="three">Even more text.</p>

Cu ambele exemple, ne putem ajusta valorile în funcție de pixeli sau procente. De asemenea, putem controla cantitatea de schimbare de fiecare parte a obiectului, specificând regulile de sus, jos, stânga sau dreapta. Pentru a face acest lucru, trebuie să ne edităm valorile pentru a completa doar partea stângă a paragrafelor noastre și să aplicăm doar o margine în partea de jos a fiecăruia:

<style>
p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:groove;
border-width:medium;
}
p.three{
border-style:dotted;
border-width:1px;
border-color:red;
}
p {padding-left:10px;}
p {margin-bottom:50px;}
</style>
<p class="one">Some text.</p>
<p class="two">Some more text.</p>
<p class="three">Even more text.</p>

În loc să scriem mai multe reguli pentru a ajusta laturile, le putem combina într-o singură declarație scriind valorile noastre în sensul acelor de ceasornic, începând cu sus, ca spațiere: sus dreapta jos stânga, sau margine: sus dreapta jos stânga, înlocuind cuvintele cu o valoare fixă sau relativă (pot fi amestecate) și utilizând zero ca loc de referință dacă nu dorim ca valoarea implicită să fie schimbată:

<style>
p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:groove;
border-width:medium;
}
p.three {
border-style:dotted;
border-width:1px;
border-color:red;
}
p {padding:50px 30px 50px 5px;}
p {margin:50px;}
</style>
<p class="one">Some text.</p>
<p class="two">Some more text.</p>
<p class="three">Even more text.</p>

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu