CSS

CSS Dimensiones

<<< Tablas - Table en CSS Efectos Visuales en CSS >>>

Dimensiones con CSS

Las propiedades de las dimensiones nos permiten definir al ancho y la altura de los elementos, como así también controlar el espacio en blanco que dejamos entre líneas.

Ancho

La propiedad "width" define el ancho del elemento.

Código


<html>
<head>
 <style type="text/css">
.ancho{
 width: 200px;
 border: 1px solid #00FFFF;
 padding: 5px
}
 </style>
</head>

<body>
<p class="ancho">Párrafo con un ancho 
de 200 pixels.</p>
</body>
</html>

Resultado

Párrafo con un ancho de 200 pixels.

Altura

La propiedad "height" define la altura del elemento.

Código


<html>
<head>
 <style type="text/css">
.altura{
 height: 100px;
 border: 1px solid #00FFFF;
 padding: 5px
}
 </style>
</head>

<body>
<p class="altura">Párrafo definido 
con una altura de 100 px.</p>
</body>
</html>

Resultado

Párrafo definido con una altura de 100 px.

Separación entre líneas

La propiedad "line-height" define la distancia que dejaremos entre líneas de un texto.

Código


<html>
<head>
 <style type="text/css">
.separa{
 line-height: 40px;
 width: 150px
 border: 1px solid #00FFFF;
 padding: 5px
}
 </style>
</head>

<body>
<p class="separa">Párrafo con una separación 
entre líneas de 40 px.</p>
</body>
</html>

Resultado

Párrafo con una separación entre líneas de 40 px.

Propiedades de las dimensiones

Propiedad	Descripción	Valores	Detalles
width	Ancho.	longitud	Longitud
		%	Porcentaje
		auto	Automático
min-width	Ancho mínimo.	longitud	Longitud
min-width	Ancho mínimo.	%	Porcentaje
max-width	Ancho máximo.	longitud	Longitud
		%	Porcentaje
		none	Sin máximo
height	Altura.	longitud	Longitud
		%	Porcentaje
		auto	Automático
min-height	Alto mínimo.	longitud	Longitud
min-height	Alto mínimo.	%	Porcentaje
max-height	Alto máximo.	longitud	Longitud
		%	Porcentaje
		none	Sin máximo
line-height	Altura entre las bases del texto.	normal	Normal
		número	Número
		longitud	Longitud
		%	Porcentaje