{{ CSSTutorialTOC() }}
{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Aquesta és la 11th secció del tutorial CSS Getting Started descriu com podeu utilitzar CSS per controlar l'espai que ocupa un element quan es mostra. En el document d'exemple, canviareu l'espaiat i afegireu regles decoratives.
Quan el navegador mostra un element, l'element ocupa espai. Hi ha quatre parts en l'espai que ocupa.
Al mig, és l'espai que l'element necessita per mostrar el seu contingut. Al voltant d'això, hi ha un padding (farciment). Al voltant d'això, hi ha un border (vora). Al voltant d'això, hi ha un margin (marge) que separa l'element d'altres elements.
|
margin (marge) border (vora) padding (farciment) element El gris pàl·lid mostra parts de la disposició. |
element Això és el que es veu en el vostre navegador. |
El farcit, vora i marge poden tenir diferents mides en la part superior, dret, inferior i esquerra de l'element. Qualsevol o totes aquestes mides poden ser zero.
El farcit és sempre del mateix color que el fons de l'element. Així que quan s'estableix el color de fons, es veu el color aplicat a l'element en si i el seu farcit. El marge és sempre transparent.
|
margin border padding element L'element té un fons verd. |
element Això és el que es veu en el vostre navegador. |
Podeu utilitzar les vores per decorar elements amb línies o caixes.
Per especificar la mateixa vora a tot al voltant d'un element, utilitzeu la propietat {{ cssxref("border") }}. Especificar l'ample (en píxels en general per a la seva visualització en una pantalla), l'estil i el color.
Els estils són:
solid |
dotted |
dashed |
double |
inset |
outset |
ridge |
groove |
També podeu establir l'estil a none o hidden per eliminar de forma explícita la vora, o establir el color a transparent per fer la vora invisible sense canviar el disseny.
Especificar vores a un costat alhora, utilitzeu les propietats: {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.
Aquesta regla estableix el color de fons i la vora de la part superior dels elements d'encapçalament:
h3 {
border-top: 4px solid #7c7; /* mid green */
background-color: #efe; /* pale green */
color: #050; /* dark green */
}
El resultat és el següent:
|
Stylish heading |
Aquesta regla fa que les imatges siguin més fàcils de veure, donant-los una vora gris mig en tot:
img {border: 2px solid #ccc;}
El resultat és el següent:
| Imatge: |  |
Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.
Utilitzeu la propietat {{ cssxref("margin") }} o la propietat {{ cssxref("padding") }} per establir els amples dels marges o de farciment, respectivament.
Si s'especifica una amplada, s'aplica al voltant de tot l'element (a dalt, dreta, a sota i a l'esquerra).
Si s'especifica dos amples, la primera s'aplica a la part superior i inferior, la segona a la dreta i l'esquerra.
Podeu definir els quatre amplades en l'ordre: dalt, dreta, a sota, a l'esquerra.
Aquesta regla distingeix els paràgrafs amb la classe remark, donant-los una vora vermella al seu voltant.
El farciment al seu voltant separa la vora del text una mica.
Un marge esquerre sagna el paràgraf en relació amb la resta del text:
p.remark {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
El resultat és el següent:
|
Here is a normal paragraph. Here is a remark. |
Quan s'utilitzan marges i farcit per ajustar la forma en què els elements es disposen, les seves regles d'estil interactuen amb els valors per defecte del navegador en formes que poden ser complexes.
Els diferents navegadors posen elements de manera diferent. Els resultats podrien ser similar fins que la vostre fulla d'estil canvia les coses. A vegades això pot fer que les vostres fulles d'estil donin resultats sorprenents.
Per obtenir el resultat desitjat, és possible que hàgiu de canviar el marcat del document. La pàgina següent d'aquest tutorial teniu més informació sobre això.
Per a més informació sobre el farciment, marges i vores, vegeu la pàgina de referència Model de caixa.
Editeu l'arxiu CSS, style2.css. Afegiu aquesta regla per dibuixar una línia a través de la pàgina sobre cada capçalera:
h3 {border-top: 1px solid gray;}
Si vau prendre el repte de l'última pàgina, modifiqueu la regla que heu creat, en cas contrari afegiu aquesta nova regla, la d'afegir un espai sota cada element de la llista:
li {
list-style: lower-roman;
margin-bottom: 8px;
}
Actualitzeu el navegador per veure el resultat:
|
(A) The oceans
(B) Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
Afegiu una regla a la fulla d'estils, fent una vora àmpla al voltant dels oceans en un color que recordi al mar, alguna cosa com això:
|
(A) The oceans
(B) Numbered paragraphs . . . |
(No hi ha necessitat perquè coincideixi amb l'amplada i el color que es veu aquí exactament.)
Veure la solució per el repte.
{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny") }}En definir marges i farcit, heu modificat el disseny del document. A la pàgina següent es canvia el disseny del vostre document d'altres maneres.