style - CSS margin-top de<h1> afecta el margen del padre
padding css (4)
He buscado por un tiempo este problema y no he encontrado una respuesta directa. Al agregar un margen superior a un elemento, en mi caso ocurre principalmente con encabezados. En muchas ocasiones, el margen superior se comparte con el padre.
HTML
<div>
<h1>My title</h1>
</div>
CSS
div{
padding:20px;
}
h1{
margin-top: 20px;
}
El resultado del código anterior también agregará un margen superior al div, como si tuviéramos lo siguiente:
div{
padding:20px;
margin-top:20px; /*this one is implemented by the browser, not written on the code*/
}
Una forma de resolver esto es agregando overflow:auto al padre, en este caso el div css tiene:
div{
padding:20px;
overflow:auto;
}
Aunque el ejemplo anterior resuelve el problema, no me queda claro ¿ POR QUÉ? . Esto tiene algo que ver con los "márgenes de colapso" , donde aparentemente un margen se combina con el margen del padre. Pero ¿por qué?
¿Cómo sabemos cuándo un padre colapsará el margen del niño y cuándo no, cuál es el propósito de esta propiedad de los bloques, o es un error?
Aquí hay una demostración de JSFiddle del problema.
Y aquí está una demostración de JSFiddle de la solución.
Gracias.
Aquí hay un buen artículo, con una ligera explicación.
http://reference.sitepoint.com/css/collapsingmargins
Encuentra esto en el enlace de arriba ...
Colapsar los márgenes entre los elementos padre e hijo
Hasta ahora, solo hemos abordado el efecto de colapso en elementos adyacentes, pero el mismo proceso es válido para padres e hijos cuyos márgenes se tocan. Por "toque", nos referimos a los lugares en los que no existen rellenos, bordes o contenido entre los márgenes adyacentes. En el siguiente ejemplo, un elemento principal tiene un elemento secundario en el que se establece un margen superior:
h1 {margen: 0; fondo: #cff; } div {margen: 40px 0 25px 0; fondo: #cfc; } p {margen: 20px 0 0 0; fondo: # cf9; } En la hoja de estilo anterior, puede ver que se declara un valor de margen superior para el elemento p, y en el extracto de código a continuación, puede ver que el elemento p es un elemento secundario del elemento div:
Encabezado de contenido
Contenido del párrafo
El resultado de este código se ilustra en la Figura 2.Figura 2. Márgenes colapsados en un párrafo secundario. Una ilustración de los márgenes colapsados entre un elemento h1 y un elemento div con un elemento p infantil. Hay una brecha vertical de 40 píxeles entre el elemento h1 y el contenido del párrafo. Es posible que haya esperado que el párrafo se ubique a 60 px del encabezado, ya que el elemento div tiene un margen superior de 40 px y hay un margen superior de 20 px más en el elemento p. Es posible que también haya esperado que 20px del color de fondo del elemento div se mostraría sobre el párrafo. Esto no sucede porque, como puede ver en la Figura 2, los márgenes se colapsan para formar un margen. Solo se aplica el margen más grande (como en el caso de bloques adyacentes), como ya hemos visto.
De hecho, obtendríamos el mismo resultado si nuestro elemento div no tuviera un margen superior y el elemento p tuviera un margen superior de 40 px. El margen superior de 40px en el elemento p se convierte efectivamente en el margen superior del elemento div, y empuja el div hacia abajo en la página en 40px, dejando el elemento p anidado cómodamente en la parte superior. Ningún fondo sería visible en el elemento div sobre el párrafo. ...
Gracias a todos por sus respuestas, @ gaurav5430 publicó un enlace con una definición muy precisa que me gustaría resumir en esta respuesta. A partir de la razón por la que decidieron que estos elementos deberían comportarse de esta manera, todavía no está claro para mí; pero al menos pudimos encontrar una regla que se aplique a los márgenes de colapso:
"En términos simples, esta definición indica que cuando los márgenes verticales de dos elementos se tocan, solo se respetará el margen del elemento con el mayor valor de margen, mientras que el margen del elemento con el menor valor de margen se contraerá a cero.
Básicamente, en nuestro ejemplo de la pregunta original, el margen superior más alto es el de <h1> por lo tanto, tomado y aplicado al padre <div> .
Esta regla se cancela para:
- Elementos flotantes
- Elementos absolutamente posicionados.
- Elementos de bloque en linea
- Elementos con desbordamiento configurados en algo que no sea visible (no colapsan los márgenes con sus hijos).
- Elementos borrados (no colapsan sus márgenes superiores con el margen inferior de su bloque primario).
- El elemento raíz
Esa es la razón por la cual el overflow:hidden resolvió el problema
Gracias @ gaurav5430; Aquí está la referencia: http://reference.sitepoint.com/css/collapsingmargins
También gracias a @Adrift que publicó recursos muy buenos, aunque encontré la respuesta de @ gaurav5430 más sencilla y fácil de entender.
Si el elemento es el primer elemento secundario, agregará el margen superior al elemento principal, colapsando con el margen superior del elemento principal.
El por qué a veces el margen no se colapsa se dice claramente en la sección de márgenes de colapso W3 .
Recomiendo usar padding-top o esta solución alternativa: El margen en el elemento secundario mueve el elemento principal , ya que el overflow: hidden puede agregar daños colaterales.
mira este ejemplo: fiddle
HTML:
<div id="outside">
<div id="div1">
<h1>margin in parent</h1>
</div>
<div id="div2">
<h1>margin inside</h1>
</div>
</div>
CSS:
#outside {
background-color: #ccc;
border:1px solid #000;
}
#div1 {
background-color: #66d;
}
#div1 h1 {
margin: 20px 0 0 0;
}
#div2 {
background-color: #6d6;
}
#div2 h1 {
margin: 20px 0 0 0;
}
resolviendo el problema con desbordamiento: auto; no es bueno, ¿ha intentado dar una ID o CLASE a su división y luego hacer esto en su CSS?
#divID{
padding:auto;
}
#divID h1{
margin-top: 20px;
}
nunca use el desbordamiento porque puede causarle más problemas si agrega un SELECT dentro de su DIV, buena suerte
Hay tres formas diferentes en CSS que puede dictar qué elementos desea personalizar. Cada forma es útil para un conjunto específico de propósitos, pero al usar los tres juntos, realmente puede aprovechar el poder en cascada de las hojas de estilo. Los tres métodos para describir objetos en una página son por su nombre de etiqueta, su ID o su clase.