Cómo puedo modificar la altura standard de todos elemntos de una página?

ECZOR · #1 (**permalink**) 03/09/2009, 02:49

Pues la pregunta ya dice todo.

Deseo que todos los elementos de una página sean menos altos, y no me refiero al tamaño de las letras sino a la altura de cada elemento. Por ejemplo, los input que sean más bajitos porque quiero hacer un form con caracteres muy chicos y en un espacio reducido.

También desearía saber como reducir el espacio vertical entre elementos o líneas de la página html.

Gracias.

deirdre · #2 (**permalink**) 03/09/2009, 05:42

Puedes crear clases especificando la altura que desees en px para los elementos que creas conveniente, no olvidando señalar también el tamaño en px de la fuente y del line-height, todos ellos al tamaño mínimo que te guste (p.e. 9 px, por debajo de 9 la lectura puede ser muy dificultosa).

Bye

ECZOR · #3 (**permalink**) 03/09/2009, 06:35

Gracias, Deirdre.

He hecho algunas pruebas con clases aplicadas a elementos individuales y funciona. Andaba buscando un atributo que sirviera para reducir el tamaño por defecto para todos los elementos a la vez pero no creo que exista.
También tengo que tener en cuenta el atributo cellpadding que se haya definido para la tabla y el margin de las celdas. Va marchando la cosa.

Gracias de nuevo.

deirdre · #4 (**permalink**) 03/09/2009, 09:43

Hola ECZOR

Puedes crearte tu propio reset añadiendo o quitando elementos. Te pongo un ejemplo:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resetear a 9px</title>
<style type="text/css">
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,span {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	line-height: 9px;
}
</style>
</head>

<body>
<p>Prueba de párrafo</p>
<p>Prueba de párrafo</p>
<input name="prueba" value="Prueba de input" />
<div style="border: 1px dotted #484848;">Prueba de div</div>
<span>Prueba de span</span>
<h1>Prueba de h1</h1>
<code>Prueba de code</code>
<ul>
	<li>Prueba de lista 1</li>
	<li>Prueba de lista 2</li>
	<li>Prueba de lista 3</li>
</ul>
<button>Prueba de botón</button>
</body>

</html>

Hazte un copy-paste y lo pruebas.

Bye

ECZOR · #5 (**permalink**) 03/09/2009, 13:09

Probado y visto. Muchas gracias. Esto es lo que pasa con los nuevos....

deirdre · #6 (**permalink**) 03/09/2009, 18:06

De nada. Todos somos nuevos en tantas cosas...

Me intriga ver tu página miniatura (esa cosa tan chiquita por todos lados, debe estar bien):

Bye