Esercizi Margini e Padding CSS
Affina le tue competenze nel regolare accuratamente i margini e il padding degli elementi HTML per un layout perfettamente spaziato e bilanciato. Pratica le regole CSS per ottenere risultati ottimali.
Esercizio 1
Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare un margine esterno di 20px e un padding interno di 10px al paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 1</title> <style> p { margin: 20px; padding: 10px; } </style> </head> <body> <p> Questo paragrafo ha un margine esterno di 20px e un padding interno di 10px. </p> </body></html>
Esercizio 2
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un margine interno di 5px e un padding esterno di 15px al link.
<!DOCTYPE html><html> <head> <title>Esercizio 2</title> <style> a { margin: 0; padding: 15px; color: black; text-decoration: none; } </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 un margine esterno di 30px e un padding interno di 10px al div.
<!DOCTYPE html><html> <head> <title>Esercizio 3</title> <style> div { margin: 30px; padding: 10px; } </style> </head> <body> <div> Questo div ha un margine esterno di 30px e un padding interno di 10px. </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 un margine interno di 5px e un padding esterno di 10px agli elementi di lista.
<!DOCTYPE html><html> <head> <title>Esercizio 4</title> <style> li { margin: 0; padding: 10px; list-style-type: none; } </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 un margine esterno di 40px e un padding interno di 10px al titolo.
<!DOCTYPE html><html> <head> <title>Esercizio 5</title> <style> h1 { margin: 40px; padding: 10px; } </style> </head> <body> <h1> Questo è un titolo con un margine esterno di 40px e un padding interno di 10px. </h1> </body></html>
Esercizio 6
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un margine interno di 5px e un padding esterno di 15px al link, con il testo in grassetto.
<!DOCTYPE html><html> <head> <title>Esercizio 6</title> <style> a { margin: 0; padding: 15px; font-weight: bold; color: black; text-decoration: none; } </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 un margine esterno di 30px e un padding interno di 10px al div, con lo sfondo di colore grigio chiaro.
<!DOCTYPE html><html> <head> <title>Esercizio 7</title> <style> div { margin: 30px; padding: 10px; background-color: #f2f2f2; } </style> </head> <body> <div> Questo div ha un margine esterno di 30px, un padding interno di 10px e uno sfondo grigio chiaro. </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 un margine esterno di 5px e un padding interno di 10px agli elementi di lista, con i punti della lista di colore rosso.
<!DOCTYPE html><html> <head> <title>Esercizio 8</title> <style> li { margin: 5px; padding: 10px; list-style-type: none; color: red; } </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 un margine esterno di 40px e un padding interno di 10px al titolo, con il testo centrato.
<!DOCTYPE html><html> <head> <title>Esercizio 9</title> <style> h1 { margin: 40px; padding: 10px; text-align: center; } </style> </head> <body> <h1> Questo è un titolo centrato con un margine esterno di 40px e un padding interno di 10px. </h1> </body></html>
Esercizio 10
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare un margine interno di 5px e un padding esterno di 15px al link, con uno sfondo di colore giallo e il testo di colore blu.
<!DOCTYPE html><html> <head> <title>Esercizio 10</title> <style> a { margin: 0; padding: 15px; background-color: yellow; color: blue; text-decoration: none; } </style> </head> <body> <a href="#">Clicca qui</a> </body></html>