Vorrei capire meglio il funzionamento di questa proprietà css. Deve essere banale, ma nonostante le ore di studio non capisco.
Se ho un paragrafo con margine non nullo all'interno di una div, il comportamento cambia a seconda che la div abbia il bordo o no: infatti se la div non ha il bordo, il margine del paragrafo esce dall'area del contenuto della div, come se fosse il margine della div stessa.
Nel caso in cui la div ha un bordo, invece, il margine rimane all'interno dell'area del contenuto e padding, e assume il colore di sfondo della div.
Le domande sono:
1) perché funziona così.
2) come posso fare in modo che il paragrafo sia sempre nell'area del contenuto compreso il suo margine.
Allego file di esempio e immagine risultato in firefox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="en" lang="en">
<head>
<style>
body{
margin:0 auto;
padding:0;
line-height: 1.5em;
background:#ddd;
font-family:Arial;
font-size:14px;
}
div#ciccio{
background: #ff0055;
/*border:solid blue 2px;*/
margin:0;
padding:0;
width:250px;
height:150px;
}
div#cocco{
background: #00ff55;
border:solid blue 2px;
margin:0;
padding:0;
width:250px;
height:150px;
}
</style>
</head>
<body>
<div id="ciccio" >
div con margin 0, ma siccome p ha un margin top allora non si attacca al bordo</p>
</div>
<div id="cocco" >
Stessa div ma con border: il margine del paragrafo prende il colore del background</p>
</div>
Vorrei sapere perché
</body>
</html>
Rispondi quotando