El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Marge i Farciment

Següent ►
►

En aquest tema, explorarem dues propietats fonamentals del model de caixa de CSS: el marge i el farciment. Aquestes propietats són essencials per controlar l'espai al voltant i dins dels elements HTML.

Objectius d'Aprenentatge

  • Comprendre la diferència entre marge i farciment.
  • Aprendre a utilitzar les propietats margin i padding en CSS.
  • Aplicar marges i farciments a elements HTML per controlar l'espaiat.

  1. Diferència entre Marge i Farciment

Marge

El marge és l'espai fora de la vora d'un element. És l'espai que separa un element dels altres elements que l'envolten.

Farciment

El farciment és l'espai dins de la vora d'un element. És l'espai entre el contingut de l'element i la seva vora.

Visualització del Model de Caixa

+---------------------------+
|        MARGE              |
|  +---------------------+  |
|  |     VORA            |  |
|  |  +---------------+  |  |
|  |  |  FARICMENT    |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | CONTINGUT|  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

  1. Propietat margin

La propietat margin s'utilitza per establir l'espai fora de la vora d'un element. Es pot especificar per a cada costat de l'element (superior, dret, inferior, esquerre) o de manera abreujada.

Sintaxi

/* Marge individual */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

/* Marge abreujat */
margin: 10px 15px 20px 25px; /* superior, dret, inferior, esquerre */

Exemple

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Marge</title>
    <style>
        .caixa {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            margin: 20px 40px 60px 80px; /* superior, dret, inferior, esquerre */
        }
    </style>
</head>
<body>
    <div class="caixa">Contingut</div>
</body>
</html>

  1. Propietat padding

La propietat padding s'utilitza per establir l'espai dins de la vora d'un element. Igual que amb el marge, es pot especificar per a cada costat de l'element o de manera abreujada.

Sintaxi

/* Farciment individual */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;

/* Farciment abreujat */
padding: 10px 15px 20px 25px; /* superior, dret, inferior, esquerre */

Exemple

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Farciment</title>
    <style>
        .caixa {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            padding: 20px 40px 60px 80px; /* superior, dret, inferior, esquerre */
        }
    </style>
</head>
<body>
    <div class="caixa">Contingut</div>
</body>
</html>

  1. Exercicis Pràctics

Exercici 1: Aplicar Marge

Crea un document HTML amb tres elements div i aplica marges diferents a cada un d'ells.

Exercici 2: Aplicar Farciment

Crea un document HTML amb tres elements div i aplica farciments diferents a cada un d'ells.

Solucions

Exercici 1: Aplicar Marge

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de Marge</title>
    <style>
        .caixa1 {
            width: 100px;
            height: 50px;
            background-color: lightcoral;
            margin: 10px;
        }
        .caixa2 {
            width: 100px;
            height: 50px;
            background-color: lightseagreen;
            margin: 20px;
        }
        .caixa3 {
            width: 100px;
            height: 50px;
            background-color: lightsteelblue;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="caixa1">Caixa 1</div>
    <div class="caixa2">Caixa 2</div>
    <div class="caixa3">Caixa 3</div>
</body>
</html>

Exercici 2: Aplicar Farciment

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de Farciment</title>
    <style>
        .caixa1 {
            width: 100px;
            height: 50px;
            background-color: lightcoral;
            padding: 10px;
        }
        .caixa2 {
            width: 100px;
            height: 50px;
            background-color: lightseagreen;
            padding: 20px;
        }
        .caixa3 {
            width: 100px;
            height: 50px;
            background-color: lightsteelblue;
            padding: 30px;
        }
    </style>
</head>
<body>
    <div class="caixa1">Caixa 1</div>
    <div class="caixa2">Caixa 2</div>
    <div class="caixa3">Caixa 3</div>
</body>
</html>

Conclusió

En aquest tema, hem après la diferència entre marge i farciment, com utilitzar les propietats margin i padding en CSS, i hem aplicat aquests conceptes a elements HTML. Aquests coneixements són fonamentals per controlar l'espaiat i el disseny dels elements en una pàgina web. En el proper tema, explorarem les propietats de la vora i el contorn.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats