Extraña aplicacion de "margin"
Publicado por Israel (51 intervenciones) el 25/12/2021 16:27:56
He creado una simple estructura HTML:
<body>
<div class="principal">
<div class="widget">
1
</div>
<div class="widget">
2
</div>
</div>
</body>
Acompanada de:
body{
background-color:white;
font-family: Verdana;}
.principal{
background-color: #e67e22;}
.widget{
background-color: #d35400;
margin: 20px;
height: 150px;}
Pues bien, el margen superior del primer widget e inferior del segundo widget (ambos obvio de 20px) no se aplican respecto del <div> principal, como se comprueba porque ambos widgets no estan rodeados por una franja de 20 px en naranja claro. DIchos margenes los aplica respecto del <body>. Pq???
Un saludo.
<body>
<div class="principal">
<div class="widget">
1
</div>
<div class="widget">
2
</div>
</div>
</body>
Acompanada de:
body{
background-color:white;
font-family: Verdana;}
.principal{
background-color: #e67e22;}
.widget{
background-color: #d35400;
margin: 20px;
height: 150px;}
Pues bien, el margen superior del primer widget e inferior del segundo widget (ambos obvio de 20px) no se aplican respecto del <div> principal, como se comprueba porque ambos widgets no estan rodeados por una franja de 20 px en naranja claro. DIchos margenes los aplica respecto del <body>. Pq???
Un saludo.
Valora esta pregunta
0
