📢 Nuovo Corso Laravel API disponibile!

Esercizi Box Sizing CSS

Allenati nell’utilizzo della proprietà “box-sizing” in CSS per avere un controllo completo sul dimensionamento degli elementi HTML. Migliora la gestione degli spazi e ottieni un layout più armonioso.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare il box-sizing in modo che il padding e il bordo non influenzino la larghezza totale del paragrafo, che dovrà essere di 200px.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 1</title>
<style>
p {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid red;
}
</style>
</head>
<body>
<p>Questo paragrafo ha una larghezza di 200px, incluso padding e bordo.</p>
</body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il box-sizing in modo che il padding non influenzi la larghezza del link, che dovrà essere di 100px.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 2</title>
<style>
a {
box-sizing: content-box;
width: 100px;
padding: 20px;
color: black;
text-decoration: none;
border: 1px dashed blue;
}
</style>
</head>
<body>
<a href="#">Clicca qui</a>
</body>
</html>

Esercizio 3

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare il box-sizing in modo che il padding e il bordo siano inclusi nella larghezza del div, che dovrà essere di 300px in totale.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 3</title>
<style>
div {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>Questo div ha una larghezza di 300px, inclusi padding e bordo.</div>
</body>
</html>

Esercizio 4

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare il box-sizing in modo che il padding non influenzi l'altezza degli elementi di lista, che dovranno essere di 40px in altezza.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 4</title>
<style>
li {
box-sizing: content-box;
height: 40px;
padding: 10px;
list-style-type: none;
border: 2px solid blue;
}
</style>
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>

Esercizio 5

Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare il box-sizing in modo che il bordo non influenzi l'altezza del titolo, che dovrà essere di 50px.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 5</title>
<style>
h1 {
box-sizing: content-box;
height: 50px;
padding: 10px;
border: 1px dashed black;
}
</style>
</head>
<body>
<h1>
Questo è un titolo con un'altezza di 50px, incluso padding ma escluso
bordo.
</h1>
</body>
</html>

Esercizio 6

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il box-sizing in modo che il padding sia incluso nella larghezza del link, che dovrà essere di 150px.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 6</title>
<style>
a {
box-sizing: border-box;
width: 150px;
padding: 20px;
color: black;
text-decoration: none;
border: 1px dashed blue;
}
</style>
</head>
<body>
<a href="#">Clicca qui</a>
</body>
</html>

Esercizio 7

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare il box-sizing in modo che il padding sia incluso nella larghezza del div, che dovrà essere di 400px in totale.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 7</title>
<style>
div {
box-sizing: border-box;
width: 400px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>Questo div ha una larghezza di 400px, inclusi padding e bordo.</div>
</body>
</html>

Esercizio 8

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare il box-sizing in modo che il padding sia incluso nell'altezza degli elementi di lista, che dovranno essere di 60px.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 8</title>
<style>
li {
box-sizing: border-box;
height: 60px;
padding: 10px;
list-style-type: none;
border: 2px solid blue;
}
</style>
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>

Esercizio 9

Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare il box-sizing in modo che il padding sia incluso nell'altezza del titolo, che dovrà essere di 80px.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 9</title>
<style>
h1 {
box-sizing: border-box;
height: 80px;
padding: 10px;
border: 1px dashed black;
}
</style>
</head>
<body>
<h1>
Questo è un titolo con un'altezza di 80px, incluso padding ma escluso
bordo.
</h1>
</body>
</html>

Esercizio 10

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il box-sizing in modo che il bordo non influenzi la larghezza del link, che dovrà essere di 120px.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 10</title>
<style>
a {
box-sizing: content-box;
width: 120px;
padding: 20px;
color: black;
text-decoration: none;
border: 1px dashed blue;
}
</style>
</head>
<body>
<a href="#">Clicca qui</a>
</body>
</html>