Lun. Ago 3rd, 2020

Box Model in HTML e CSS

Benvenuti in questa nuova guida su HTML e CSS.
Oggi andremo a trattare di nuovo del box model, ma in una maniera molto più pratica: andremo a vedere come “usare” questo box model.


Per prima cosa, tra le regole di style aggiungiamo un div (con id o classe che preferite, in questo caso dato che è un esempio, non userò nessuno dei due)

div {
width:300px;
height:100px;
border:5px solid red;
padding:10px;
margin:30px;
}

In poche parole abbiamo definito (in questo ordine): larghezza e altezza del div, spessore, stile e colore del bordo, spazio tra il bordo e il contenuto e spazio tra il div e tutti gli altri elementi

Andiamo ora a “usarlo” nel nostro codice HTML:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width:300px;
height:100px;
border:5px solid red;
padding:10px;
margin:30px;
}
</style>
</head>
<body>
<h1>Esempio box model</h1>
<div>
<p>Questo paragrafo fa parte del div</p>
<p>Pure questo</p>
</div>
<p>Questo no</p>
</body>
</html>

Provate a copiare e incollare questo codice in un file .html e aprirlo con il browser.
È un semplice esempio, provate a modificarlo come volete.


Per questa guida è tutto, per qualsiasi domanda potete contattarmi su kirond. Invece se avete altre guide da consigliare scrivetele al nostro Profilo Ufficiale, Draky00 o al nostro Bot Ufficiale per Limitati.

Risorse

Iscriviti tramite email

Inserisci il tuo indirizzo e-mail per iscriverti a HackTricks, e ricevere via e-mail le notifiche di nuovi post.

Unisciti a 14 altri iscritti