Foros del Web - Ver Mensaje Individual

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.