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
div {
width: 300px;
height: 150px;
}
3.2 max-width e min-width
div {
max-width: 90%; /* non supera il 90% della larghezza del contenitore */
min-width: 200px; /* non scende sotto i 200px */
}
3.3 box-sizing
/* 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.
Commenti
Posta un commento