[SOLUCIONADO] Ajustar tamaño del texto a un DIV

David19872 · #1 (**permalink**) 31/07/2013, 20:45

Hola a todos tengo el siguiente conjunto de divs de tal manera que en la sección azul se muestra el titulo y el texto que deseo mostrar, a su vez posee una separación (padding) de 25px con su contenedor como se ve en el margen verde. Lo que intento es que en todas direcciones queden exactamente los 25px, al justificar el texto funciona perfectamente en los laterales, pero como ven en el titulo no sucede, pues el div que lo contiene posee un espacio por encima y por debajo como se ve en el recuadro rojo aumentando la separación. No puedo darle un tamaño fijo al div pues el texto se genera dinamicamente así que puede variar, y usando la propiedad height auto no sucede nada...

Cómo podria ajustar el div al alto especifico del texto para que se elimine el espacio sobrante?

De antemano gracias!

Naahuel · #2 (**permalink**) 31/07/2013, 23:42

¿El título o texto está en otro elemento como h1 o p? Si es así, asegurate de que no tengan padding or margin.

Sino, eso es el alto de línea. Lo solucionás poniendolo del mismo alto que la fuente:

Código CSS:

Ver originalline-height: 1em;

Ejemplo:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    .padre{
      padding:25px;
      margin-bottom: 10px;
      background: #eee;
    }
    .hijo{
      background: red
    }
    .correjido{
      line-height: 1em;
    }
  </style>
</head>
<body>
  <div class="padre">
    <div class="hijo">
     texto
    </div>
  </div>
  <div class="padre">
    <div class="hijo correjido">
     texto
    </div>
  </div>
</body>
</html>

David19872 · #3 (**permalink**) 01/08/2013, 07:59

Gracias!

Ha disminuido de 35px a 26 - 27px (según las letras que aparezcan), un rango mucho más aceptable para lo que busco!