Vediamo se riesco a spiegarmi con questo esempio
Ecco un codice html con relativo css
Che produce l'immagine allegataCodice PHP:<head>
<style>
#esterno
{
float: left;
margin: 0px;
padding: 0px;
border: 1px solid black;
width: 400px;
background-color: yellow;
}
#interno
{
float: left;
margin: 10px;
padding: 20px;
border: 1px solid red;
}
#interno-interno
{
background-color: #ccf;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="esterno">
<div id="interno">
<div id="interno-interno">
klajsfdò kafm kj asdò fòak afj òakfdmò akdfj saòfkj maòfjòas
asf safjda -klfja -klfja afjka òafjklòq jsòadsfkl asò ask
la dò àJDSòA FDòA FAòFAFJDDòA FJA sòdfsfdkjs òfkdgjsgfjk sd
klajsfdò kafm kj asdò fòak afj òakfdmò akdfj saòfkj maòfjòas
asf safjda -klfja -klfja afjka òafjklòq jsòadsfkl asò ask
la dò àJDSòA FDòA FAòFAFJDDòA FJA sòdfsfdkjs òfkdgjsgfjk sd
klajsfdò kafm kj asdò fòak afj òakfdmò akdfj saòfkj maòfjòas
asf safjda -klfja -klfja afjka òafjklòq jsòadsfkl asò ask
la dò àJDSòA FDòA FAòFAFJDDòA FJA sòdfsfdkjs òfkdgjsgfjk sd
klajsfdò kafm kj asdò fòak afj òakfdmò akdfj saòfkj maòfjòas
asf safjda -klfja -klfja afjka òafjklòq jsòadsfkl asò ask
la dò àJDSòA FDòA FAòFAFJDDòA FJA sòdfsfdkjs òfkdgjsgfjk sd
</div>
</Div>
</div>
</body>
Il div che ci interessa è il div con id="interno" poichè è l'unico con margin e padding. I div "esterno" e "interno-interno" hanno i colori solo per permetterci di distinguere le cose che ci interessano
Il "border" come puoi vedere dalla figura è la cornice rossa e viene definita da "border: 1px solid red";
Il "margin" è la distanza tra il bordo di un oggetto e il bordo di qualsiasi cosa gli stia vicino o anche intorno... infatti come vedi in figura è la distanza tra la cornice rossa (il bordo) e la cornice nera (il bord del div ESTERNO)
Il padding invece è la distanza tra il bordo di un elemento e il suo contenuto. Nel nostro caso la distanza tra la cornice rossa e la parte azzurrina
Rispondi quotando