CSS Dimensiones

Defina el ancho, alto y distancia entre líneas.


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.

Ejemplo

Vamos a definir el ancho de un texto.

Código
<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>
Resultado

Párrafo con un ancho de 200 pixels.


Altura

La propiedad height define la altura del elemento.

Ejemplo

Vamos a definir la altura de un elemento.

Código
<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>
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.

Ejemplo

Vamos a ver como establecer la distancia entre líneas.

Código
<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>
Resultado

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


Propiedades de las dimensiones

PropiedadDescripciónValoresDetallesEj.
width Ancho. longitud Longitud Ejemplo de como determinar el ancho de un elemento en pixels
% Porcentaje Ejemplo de como determinar el ancho de un elemento con un valor en porcentajes
auto Automático Ejemplo de como determinar el ancho de un elemento con el valor auto
min-width Ancho mínimo. longitud Longitud Ejemplo de como determinar el ancho mínimo de un elemento en pixels
% Porcentaje Ejemplo de como determinar el ancho mínimo de un elemento en porcentajes
max-width Ancho máximo. longitud Longitud Ejemplo de como determinar el ancho máximo de un elemento en pixels
% Porcentaje Ejemplo de como determinar el ancho máximo de un elemento en porcentaje
none Sin máximo Ejemplo de como determinar que no tenga ancho máximo
height Altura. longitud Longitud Ejemplo de como definir la altura de un elemento en pixels
% Porcentaje Ejemplo de como definir la altura de un elemento en porcentaje
auto Automático Ejemplo de como definir la altura de un elemento con el valor auto
min-height Alto mínimo. longitud Longitud Ejemplo de como definir la altura mínima de un elemento en pixels
% Porcentaje Ejemplo de como definir la altura mínima de un elemento en porcentaje
max-height Alto máximo. longitud Longitud Ejemplo de como definir la altura máxima de un elemento en pixels
% Porcentaje Ejemplo de como definir la altura máxima de un elemento en porcentaje
none Sin máximo Ejemplo de como definir la altura máxima de un elemento con el valor none
line-height Altura entre las bases del texto. normal Normal Ejemplo de line-height y el valor normal
número Número Ejemplo de como definir una distancia entre líneas de un mismo párrafo
longitud Longitud Ejemplo de como definir una distancia entre líneas de un mismo párrafo en pixels
% Porcentaje Ejemplo de line-height con un valor en porcentaje


<<< Márgenes - Margin en CSS Efectos Visuales en CSS >>>

En la Web