El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

El model de caixa és un concepte fonamental en CSS que descriu com es disposen i es dimensionen els elements HTML en una pàgina web. Cada element HTML es representa com una caixa rectangular, i el model de caixa defineix les diferents parts d'aquesta caixa i com interactuen entre elles.

Parts del Model de Caixa

Cada caixa en el model de caixa de CSS es compon de quatre parts principals:

Contingut (Content): L'àrea on es mostra el contingut real de l'element, com text, imatges, etc.
Farciment (Padding): L'espai entre el contingut i la vora de l'element. El farciment és transparent.
Vora (Border): L'àrea que envolta el farciment. La vora pot tenir un color, estil i amplada definits.
Marge (Margin): L'espai fora de la vora de l'element. El marge és transparent i separa l'element dels altres elements.

A continuació es mostra una representació visual del model de caixa:

+---------------------------+
|        Marge (Margin)     |
|  +---------------------+  |
|  |      Vora (Border)  |  |
|  |  +---------------+  |  |
|  |  | Farciment     |  |  |
|  |  | (Padding)     |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | Contingut|  |  |  |
|  |  |  | (Content)|  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

Propietats CSS del Model de Caixa

Contingut

El contingut es defineix per les dimensions de l'element, que es poden establir amb les propietats width i height.

.element {
  width: 200px;
  height: 100px;
}

Farciment

El farciment es defineix amb la propietat padding. Es pot especificar per a cada costat de la caixa (superior, dret, inferior, esquerre) o de manera abreujada.

.element {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  /* O de manera abreujada */
  padding: 10px 20px;
}

Vora

La vora es defineix amb la propietat border. Es pot especificar l'amplada, l'estil i el color de la vora.

.element {
  border-width: 2px;
  border-style: solid;
  border-color: #000;
  /* O de manera abreujada */
  border: 2px solid #000;
}

Marge

El marge es defineix amb la propietat margin. Igual que el farciment, es pot especificar per a cada costat de la caixa o de manera abreujada.

.element {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  /* O de manera abreujada */
  margin: 10px 20px;
}

Exemples Pràctics

Exemple 1: Caixa amb Farciment i Vora

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Model de Caixa</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 2px solid #000;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="box">Contingut de la caixa</div>
</body>
</html>

Exemple 2: Caixa amb Marge

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Model de Caixa</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      margin: 20px;
      border: 2px solid #000;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="box">Contingut de la caixa</div>
</body>
</html>

Exercicis Pràctics

Exercici 1: Crear una Caixa amb Farciment, Vora i Marge

Instruccions:

Crea un fitxer HTML amb una caixa que tingui:
- Amplada de 300px i alçada de 150px.
- Farciment de 15px.
- Vora de 3px de color blau.
- Marge de 25px.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici Model de Caixa</title>
  <style>
    .box {
      width: 300px;
      height: 150px;
      padding: 15px;
      border: 3px solid blue;
      margin: 25px;
      background-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <div class="box">Contingut de la caixa</div>
</body>
</html>

Exercici 2: Ajustar les Dimensions d'una Caixa

Instruccions:

Crea un fitxer HTML amb una caixa que tingui:
- Amplada de 250px i alçada de 100px.
- Farciment de 10px.
- Vora de 2px de color vermell.
- Marge de 20px.
Ajusta les dimensions de la caixa perquè el contingut no es desbordi.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici Model de Caixa</title>
  <style>
    .box {
      width: 250px;
      height: 100px;
      padding: 10px;
      border: 2px solid red;
      margin: 20px;
      background-color: #d0d0d0;
      box-sizing: border-box; /* Ajusta les dimensions per incloure vora i farciment */
    }
  </style>
</head>
<body>
  <div class="box">Contingut de la caixa</div>
</body>
</html>

Conclusió

El model de caixa és essencial per entendre com es disposen i es dimensionen els elements en una pàgina web. Comprendre les diferents parts del model de caixa i com utilitzar les propietats CSS per ajustar-les és fonamental per crear dissenys web efectius i atractius. En els següents mòduls, aprofundirem en altres aspectes del disseny i l'estilització amb CSS.

Comprendre el Model de Caixa

Parts del Model de Caixa

Propietats CSS del Model de Caixa

Contingut

Farciment

Vora

Marge

Exemples Pràctics

Exemple 1: Caixa amb Farciment i Vora

Exemple 2: Caixa amb Marge

Exercicis Pràctics

Exercici 1: Crear una Caixa amb Farciment, Vora i Marge

Exercici 2: Ajustar les Dimensions d'una Caixa

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu