- Teoría
- Teoría
Colapso de márgenes
En esta segunda sección veremos algunos detalles importantes del modelo de cajas. Empezaremos por los márgenes (margin).
Los márgenes verticales de dos bloques vecinos pueden colapsar. Cuando ambos márgenes son positivos y colapsan, la separación equivale al mayor de los dos. Si el margen de un elemento es de 50px y el del otro es de 30px, la separación será de 50px:
Este efecto se llama «colapso de márgenes».
Los márgenes horizontales entre elementos simplemente se suman. Por ejemplo, si dos elementos tienen márgenes de 30px, la separación horizontal entre ellos será de 60px.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Colapso de márgenes</title>
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="block block-1">Bloque 1</div>
<div class="block block-2">Bloque 2</div>
</body>
</html>
CSS
body {
padding: 20px;
}
.block {
height: 100px;
line-height: 100px;
text-align: center;
}
.block-1 {
}
.block-2 {
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Asigna márgenes a los bloques:
- Asigna un margen inferior de
20pxal primer bloque. - Asigna un margen superior de
40pxal segundo bloque.