MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

This translation is incomplete. Please help translate this article from English.

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.

Informació: Caixes

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.

Acolorir

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 un fons verd.

 

 

 

element

Això és el que es veu en el vostre navegador.

Vores

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 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: border-top, border-right, border-bottom, border-left. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.

Exemple

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: Image:Blue-rule.png

Marges i farciment

Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.

Utilitzeu la propietat margin o la propietat 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.

Exemple

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.

Més detalls

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.

Acció: Afegir vores

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

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

Repte

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

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(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.

I ara què?

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.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,