Aumenta margen con tamaño letra.

mariomon17 · #1 (**permalink**) 15/11/2011, 18:24

Hola a todos.
En mi web tengo un div en cuyo interior hay un div con un h1.
Cuando aumento el tamaño de letra del h1, el div entero baja unos milimetros en proporcion con el tamaño aumentado.

Por que ocurre esto?

Gracias de antemano :)

EDIT: He descubierto que si le quito al h1 la propiedad display: block no ocurre esto.

emprear · #2 (**permalink**) 15/11/2011, 20:00

porque el h1 es naturalmente un elemento de bloque, por lo que tiene un margin y un padding por defecto, aunque no me queda claro de quitarle el valor block a display, a menos que le hayas piesto, display: inline;

Saludos

mariomon17 · #3 (**permalink**) 15/11/2011, 20:37

Hola. Con quitar block me referia a ponerle inline, si.
Ya conozco que tiene padding, margin etc. Pero no entiendo por que estos afectan al margin del div que lo contiene. No deberia afectar solo a el?

Un saludo :)

emprear · #4 (**permalink**) 15/11/2011, 23:17

si el div que contiene el h1 tiene un alto y ancho específico y es lo sificientemente grande para contener el h1, no deberías observar cambios, de lo contrario, si, ya que el margin y padding del h1 y el padding del div respecto de este provocan el aumento.
Deberías revisar el modelo de caja en css
http://www.sidar.org/recur/desdi/traduc/es/css/box.html

todo esto se simplifica usando resets básicos

*{
padding: 0;
margin: 0;
border: none;
outline: 0;
}

realiza varios ejemplos y comprobalo
Saludos

mariomon17 · #5 (**permalink**) 16/11/2011, 19:18

Esta fijado el ancho y el alto, el h1 cabe perfectamente y sobra espacio como para 5 h1's mas.

Si la causa hubiese sido algo de esto la hubiese descubierto, el problema llega cuando no lo explico mediante ningun modelo de cajas.

Tengo mi hoja de (reset ) normalizacion para los estilos.

Y marco la diferencia ya que lo que tu me has puesto es un reset, algo que no es recomendable ya que muchos elementos requieres un margin y/o un padding. Prefiero usar algo que normalice.

Un saludo y gracias :)

emprear · #6 (**permalink**) 16/11/2011, 19:24

el mío es sólo un ejemplo genérico, no es una solución específica dado que tú código "brilla por su ausencia".

mariomon17 · #7 (**permalink**) 17/11/2011, 09:49

MI codigo es:

Código HTML:

Ver original<div>
<div id="image">
<h1>Titulo</h1>
</div>
<p> asdh sedry dffguu </p>
</div>

Código CSS:

Ver original#image {
width: 300px;
height: 250px;
}
 
/* para la comprobacion: h1 {display: inline} */

Es el primer div el que baja unos px cuando h1 es una unidad block.

Un saludo :)

emprear · #8 (**permalink**) 17/11/2011, 11:40

Analizá el siguiente código

Código HTML:

Ver original<!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">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
.contenedor{
border: solid 1px green;
}
 
.image {
width: 300px;
height: 150px;
border: solid red 1px;
}
/* para la comprobacion: h1 {display: inline} */
 
h1{
border: solid 1px #000;
font-size: 14pt;
}
 
h1.linea{
display: inline;
}
 
.aumentar_fuente{
font-size: 25pt;
}
 
div.nopadding {
padding: 0px;
}
 
h1.sinmargin{
margin: 0;
}
/*]]>*/
</style>
</head>
<body>
<div class="contenedor">
<div class="image">
<h1>Titulo</h1>
</div>
<p>Valores originales</p>
</div>
 
<div class="contenedor">
<div class="image">
<h1 class="linea">Titulo</h1>
X
</div>
<p>h1 con inline</p>
</div>
 
<div class="contenedor">
<div class="image">
<h1 class="aumentar_fuente">Titulo</h1>
</div>
<p>original + fuente aumentada</p>
</div>
 
<div class="contenedor">
<div class="image nopadding">
<h1 class="aumentar_fuente">Titulo</h1>
</div>
<p>como el anterior pero sin padding en el div contenedor del h1</p>
</div>
 
<div class="contenedor">
<div class="image nopadding">
<h1 class="sinmargin">Titulo</h1>
X. (aquí la letra X baja porque el h1 al ser block se expande hasta el 100% del div que lo contiene, <br />
comparar con ejemplo 2)
</div>
<p>como el anterior pero sin margin en h1 el tamaño de la fuente como en el ejemplo 2</p>
</div>
</body>
</html>

con respecto a tu pregunta original

Cita:

Cuando aumento el tamaño de letra del h1, el div entero baja unos milimetros en proporcion con el tamaño aumentado.

Como se puede apreciar, los divs, no varían en absoluto.
Le agregué los bordes para visualizar mejor y disminuí el alto del div image para que sea más fácil la comparación, pero esos cambios no afectan el comportamiento.

mariomon17 · #9 (**permalink**) 17/11/2011, 18:08

Ahora ando un poco liado, pero en cuanto pueda te paso el ejemplo del que te hablo y podras comprobar lo que te digo.

Un saludo :)

mariomon17 · #10 (**permalink**) 25/11/2011, 13:52

Siento el retraso pero no tuve tiempo de volver por aqui.
He subido a http://acuarioarrecife.es/stl un ejemplo de lo que me ocurre.

El div rojo esta dentro de #main, le aplico un margin-top que deberia ocurrir dentro de #main pero le ocurre a todo #main.

Entra en las herramientas para desarrolladores o Firebug, quitale el margin y veras como asciende todo #main.

Un saludo y gracias :)

emprear · #11 (**permalink**) 25/11/2011, 19:10

No me preguntes por que, ya que necesito hacer varias pruebas para determinarlo, ejecutá este código, revisalo y fijate cual es la diferencia

Código HTML:

Ver original<!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">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
/* arriba */
div.main{
min-height: 100px;  
margin-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 0 8px 1px #000000;
border: solid transparent 1px;
}
 
div.margin {
border: solid red 1px;
margin-top: 30px;
height: 200px;
}
/* medio */
 
#main {
min-height: 100px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0 0 8px 1px #000000;
}
div#margin {
border: solid 1px #000;
background: red;
margin-top: 30px;
height: 200px;
}
 
/* abajo */
.principal {
min-height: 100px;
margin-top: 10px;
margin-bottom: 10px;
border: solid red 1px;
border-radius: 5px;
box-shadow: 0 0 8px 1px #000000;
}
 
.contenedor{
border: solid 1px #000;
margin-top: 50px;
height: 200px;
}
 
/* separador */
p{
height: 50px;
line-height: 50px;
padding: 0;
background-color: maroon;
color: #FFF;
vertical-align: middle;
text-align: center;
}
 
/*]]>*/
</style>
</head>
<body>
    
<div class="main">
<div class="margin">Emprear</div>
</div>
 
<p>Separador</p>
<div id="main">
<div id="margin">mariomon17</div>
</div>
<p>Separador</p>
 
<div class="principal">
<div class="contenedor">Titulo</div>
</div>
 
</body>
</html>

concentrate porque es muy sutil el detalle, ya lo probé en tu web y funciona (todas las pruebas fueron con Firefox 8)

Saludos

mariomon17 · #12 (**permalink**) 25/11/2011, 20:47

He revisado el codigo pero no veo la diferencia.
Bueno, aprecio que en el segundo caso utilizas id en vez de class pero eso no tiene por que influir, no?

No veo el detalle :S

Gracias :)

mariomon17 · #13 (**permalink**) 25/11/2011, 20:50

mmm.... el borde?
D: Si, es el borde pero no entiendo que tiene que ver xD

Bueno, en mi proyecto lo solucione con un div encima del cual al que aplico el margin de 1px de height y funciona bien, a si que supongo que el border funcionara de manera similar.

Alguien sabra la razon?

Un saludo :)

emprear · #14 (**permalink**) 25/11/2011, 21:33

Eso es lo que estoy invetigando, pero si no le pones un borde no te hace el margin contra el contenedor sino que te mueve todo haciendo el margin contra el elemento superior.

con esto solo
border: solid transparent 1px;
todo el problema se soluciona, yo en mis primeros ejemplos no detectaba el problema porque le habia agregado un borde de casualidad, solo para hacer más visible las distancias

Ya mismo estoy poniendo un post a ver si alguien con más conocimientos sabe el porque.
Saludos

mariomon17 · #15 (**permalink**) 26/11/2011, 06:20

Si, poner border-top 1px transparent es igual que el div de un height. Ambas soluciones funcuonan.

Estare atento a ese tema

Gracias por la ayuda, a ver si conseguimos saber que pasa.

Un saludo grande :)

kseso? · #16 (**permalink**) 26/11/2011, 06:28

Primero la solucción:
uso de la propiedad overflow para evitar esos comportamientos.

El porqué tiene que ver con la forma en que el agente de usuario resuelve varios márgenes adyacentes de forma conjunta. En inglés "margin collapsing".

No he leído detenidamente todo el tema, pero creo que en el caso planteado concurren, además de los márgenes de varios elementos, el hecho de que al modificar el tamaño de la letra también se modifica la altura de línea.

Y como decía al principio, se evitan sorpresas y aplicando overflow.

emprear · #17 (**permalink**) 26/11/2011, 09:23

Cita:

Iniciado por mariomon17

Si, poner border-top 1px transparent es igual que el div de un height. Ambas soluciones funcuonan.

Estare atento a ese tema

Gracias por la ayuda, a ver si conseguimos saber que pasa.

Un saludo grande :)

Si @mariomon 17, me olvidé de comentarte, ayer postee esto cuando terminamos de resolver el problema
http://www.forosdelweb.com/f53/hay-a...6/#post4052805
y efectivamente como dice @pitufoweb y ya a delanto @Kseso, es el tema de "margin collapsing" lo que afectaba. y es un comportamiento normal de css.

Saludos

mariomon17 · #18 (**permalink**) 26/11/2011, 13:00

Busque tu tema y lo leí.
Gracias :)