css - guia - Margen en elemento hijo mueve elemento padre
qgis manual (14)
Solución ordenada solo para CSS
Use el siguiente código para anteponer un primer hijo sin contenido al div que se mueve involuntariamente:
.parent:before
{content: '''';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
La ventaja de este método es que no necesita cambiar el CSS de ningún elemento existente y, por lo tanto, tiene un impacto mínimo en el diseño. Junto a esto, el elemento que se agrega es un pseudo-elemento, que no está en el árbol DOM.
El soporte para los pseudo-elementos está muy extendido: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ e IE 8+. Esto funcionará en cualquier navegador moderno (tenga cuidado con el nuevo ::before , que no es compatible con IE8).
Contexto
Si el primer elemento secundario de un elemento tiene un margin-top , el elemento principal ajustará su posición para colapsar los márgenes redundantes. ¿Por qué? Es así como eso.
Dado el siguiente problema:
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>
<div class="parent"><!--This div moves 40px too-->
<div class="child">Hello world!</div>
</div>
Puede solucionarlo agregando un elemento secundario con contenido, como un espacio simple. Pero todos odiamos agregar espacios para lo que es un problema de solo diseño. Por lo tanto, usa la propiedad de white-space para falsificar contenido.
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>
<div class="parent"><!--This div won''t move anymore-->
<div class="fix"></div>
<div class="child">Hello world!</div>
</div>
Dónde position: relative; Asegura el correcto posicionamiento de la corrección. Y white-space: pre; hace que no tenga que agregar ningún contenido, como un espacio en blanco, a la solución. Y height: 0px;width: 0px;overflow: hidden; se asegura de que nunca veas la solución
Puede que necesite agregar line-height: 0px; o max-height: 0px; para garantizar que la altura sea realmente cero en los navegadores IE antiguos (no estoy seguro). Y, opcionalmente, podría agregar <!--dummy--> a él en los navegadores IE antiguos, si no funciona.
En resumen, puede hacer todo esto solo con CSS (lo que elimina la necesidad de agregar un hijo real al árbol DOM de HTML):
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.parent:before {content: '''';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>
<div class="parent"><!--This div won''t move anymore-->
<div class="child">Hello world!</div>
</div>
Tengo un div ( padre ) que contiene otro div ( hijo ). Parent es el primer elemento en el body sin un estilo CSS particular. Cuando me puse
.child
{
margin-top: 10px;
}
El resultado final es que la parte superior de mi hijo aún está alineada con los padres. En lugar de que el niño se desplace de 10px hacia abajo, mi padre mueve 10px hacia abajo.
Mi DOCTYPE se establece en XHTML Transitional .
¿Que me estoy perdiendo aqui?
editar 1
Mi padre debe tener dimensiones estrictamente definidas porque tiene un fondo que debe mostrarse desde arriba hacia abajo (píxel perfecto). Por lo tanto, establecer márgenes verticales es un no go .
editar 2
Este comportamiento es el mismo en FF, IE y CR.
Aunque todas las respuestas solucionan el problema, vienen con compensaciones / ajustes / compromisos como
-
floats, tienes que flotar elementos -
border-top, Esto empuja el elemento primario al menos 1 px hacia abajo, que luego debe ajustarse con la introducción de-1pxmargen de-1pxen el elemento principal. Esto puede crear problemas cuando el padre ya tiene unmargin-topen unidades relativas. -
padding-top, mismo efecto que usarborder-top -
overflow: hidden, no se puede usar cuando el padre debe mostrar contenido desbordado, como un menú desplegable -
overflow: auto, introduce barras de desplazamiento para el elemento principal que tiene (de manera intencional) contenido desbordante (como las sombras o el triángulo de la herramienta)
El problema se puede resolver utilizando pseudo elementos CSS3 de la siguiente manera
.parent::before {
clear: both;
content: "";
display: table;
margin-top: -1px;
height: 0;
}
Curiosamente, mi solución favorita a este problema aún no se menciona aquí: usar flotadores.
html:
<div class="parent">
<div class="child"></div>
</div>
css:
.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}
Véalo aquí: http://codepen.io/anon/pen/Iphol
tenga en cuenta que en caso de que necesite una altura dinámica en el padre, también tiene que flotar, así que simplemente reemplace la height:100px; por float:left;
Descubrí que, dentro de su .css> si configura la propiedad de visualización de un elemento div en bloque en línea , soluciona el problema. y el margen funcionará como se espera.
El margin de los elementos contenidos dentro de .child está colapsando.
<html>
<style type="text/css" media="screen">
#parent {background:#dadada;}
#child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">
<p>&</p>
<div id="child">
<p>&</p>
</div>
</div>
</body>
</html>
En este ejemplo, p recibe un margin de los estilos predeterminados del navegador. El font-size predeterminado del navegador suele ser de 16 px. Al tener un margin-top a más de 16px en #child , comienza a notar su movimiento de posición.
El uso de top lugar de margin-top es otra solución posible, si corresponde.
Encontró una alternativa en Elementos secundarios con márgenes dentro de DIV. También puede agregar:
.parent { overflow: auto; }
o:
.parent { overflow: hidden; }
Esto evita que los márgenes se collapse . Borde y relleno hacen lo mismo. Por lo tanto, también puede usar lo siguiente para evitar un colapso del margen superior:
.parent {
padding-top: 1px;
margin-top: -1px;
}
Actualización por solicitud popular: todo el punto del colapso de los márgenes es el manejo del contenido textual. Por ejemplo:
<style type="text/css">
h1, h2, p, ul {
margin-top: 1em;
margin-bottom: 1em;
}
</style>
<h1>Title!</h1>
<div class="text">
<h2>Title!</h2>
<p>Paragraph</p>
</div>
<div class="text">
<h2>Title!</h2>
<p>Paragraph</p>
<ul>
<li>list item</li>
</ul>
</div>
Debido a que el navegador colapsa los márgenes, el texto aparecerá como cabría esperar, y las etiquetas de envoltorio <div> no influyen en los márgenes. Cada elemento garantiza que tenga espacio alrededor, pero el espacio no se duplicará. Los márgenes de <h2> y <p> no se sumarán, sino que se deslizarán entre sí (se colapsarán). Lo mismo sucede con los elementos <p> y <ul> .
Lamentablemente, con diseños modernos, esta idea puede morderte cuando quieres explícitamente un contenedor. Esto se llama un nuevo contexto de formato de bloque en CSS. El truco de overflow o margen le dará eso.
Este es un comportamiento normal (al menos entre las implementaciones del navegador). El margen no afecta la posición del niño en relación con su padre, a menos que el padre tenga relleno, en cuyo caso la mayoría de los navegadores agregarán el margen del niño al relleno del padre.
Para obtener el comportamiento que desea, necesita:
.child {
margin-top: 0;
}
.parent {
padding-top: 10px;
}
Esto es lo que funcionó para mí.
.parent {
padding-top: 1px;
margin-top: -1px;
}
.child {
margin-top:260px;
}
Para evitar que "Div parent" use el margen de "div child":
En padre usa estos css:
- Flotador
- Relleno
- Frontera
- Rebosar
Tuve este problema también, pero prefiero evitar hacks de márgenes negativos, así que puse un
<div class="supercontainer"></div>
Alrededor de todo lo que tiene rellenos en lugar de márgenes. Por supuesto, esto significa más divitis, pero probablemente sea la forma más limpia de hacerlo correctamente.
Una solución alternativa que encontré antes de saber la respuesta correcta era agregar un borde transparente al elemento principal.
Tu caja usará píxeles extra aunque ...
.parent {
border:1px solid transparent;
}
añadir estilo de display:inline-block en display:inline-block al elemento hijo
el elemento padre no debe estar vacío al menos poner antes del elemento hijo.