domenica 16 febbraio 2025

Corso di CSS & Web Design: 3 – Box Model e spaziature

3 – Box Model e spaziature

1. Concetto di Box Model

In CSS ogni elemento HTML viene rappresentato come un rettangolo chiamato “box”, costituito da 4 aree principali:

Content (contenuto) – dove si trova testo, immagine o contenuto dell’elemento.
Padding (riempimento interno) – spazio tra contenuto e bordo.
Border (bordo) – contorno dell’elemento.
Margin (margine esterno) – spazio tra l’elemento e gli altri elementi.

Schema Box Model

+-------------------------+
|        Margin           |
|  +-------------------+  |
|  |      Border       |  |
|  |  +-------------+  |  |
|  |  |  Padding    |  |  |
|  |  | +---------+ |  |  |
|  |  | | Content | |  |  |
|  |  | +---------+ |  |  |
|  |  +-------------+  |  |
|  +-------------------+  |
+-------------------------+

Proprietà principali

margin: distanza dall’esterno del box

margin: 20px; /* tutte le direzioni */
margin-top: 10px;
margin-left: auto; margin-right: auto; /* centratura orizzontale */

padding: distanza tra contenuto e bordo
```
padding: 15px;
padding-left: 10px;
```

border: spessore, stile e colore del bordo

border: 2px solid black;
border-radius: 8px; /* bordi arrotondati */

width e height: dimensioni del contenuto (il padding e il bordo si aggiungono fuori)
```
width: 300px;
height: 200px;
max-width: 100%; /* responsive */
```

2. Differenza tra display: inline, block, inline-block

Tipo	Comportamento principale
block	Occupa tutta la larghezza disponibile, va a capo. Esempi: `<div>`, `<p>`
inline	Occupa solo lo spazio del contenuto, non va a capo. Esempi: `<span>`, `<a>`
inline-block	Combinazione: come inline ma permette width, height, padding e margin.

Esempio pratico

span {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

3. Gestione dimensioni

3.1 width e height

Definiscono dimensione del contenuto del box.

div {
  width: 300px;
  height: 150px;
}

3.2 max-width e min-width

Rendono i box responsive evitando che diventino troppo grandi o piccoli.

div {
  max-width: 90%;  /* non supera il 90% della larghezza del contenitore */
  min-width: 200px; /* non scende sotto i 200px */
}

3.3 box-sizing

Determina se il padding e il bordo rientrano nelle dimensioni dichiarate:

/* default: width e height misurano solo il contenuto */
box-sizing: content-box;

/* include padding e border nella larghezza totale */
box-sizing: border-box;

4. Esercizio svolto: costruire una card con titolo, testo e immagine

Obiettivo

Creare una card visivamente elegante con titolo, testo descrittivo e immagine, usando box model e spaziature.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Card CSS</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <div class="card">
    <img src="https://via.placeholder.com/300x150" alt="Immagine" class="card-img">
    <h2 class="card-title">Titolo della Card</h2>
    <p class="card-text">Questa è una descrizione della card. Mostra come usare margini, padding e bordi.</p>
  </div>
</body>
</html>

CSS (stile.css)

/* Stile generale */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 50px;
  background-color: #f2f2f2;
}

/* Box Card */
.card {
  width: 320px;
  padding: 20px;
  margin: 20px;
  background-color: #ffffff;
  border: 2px solid #ccc;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  box-sizing: border-box; /* include padding e border nella width */
}

/* Immagine */
.card-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

/* Titolo */
.card-title {
  font-size: 24px;
  margin: 0 0 10px 0;
  color: #333;
}

/* Testo */
.card-text {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}

Risultato

Card centrata, con padding interno.
Immagine con bordi arrotondati.
Titolo e testo con spaziature corrette grazie a margin e line-height.
Uso del box-shadow per effetto elegante.

SILICIO E NUVOLE