Home de Virtualnauta.com
Se protagonista de la Web

Virtualnauta > Tutorial CSS > Dimensiones

CSS

Básico

CSS Home
CSS Introducción
CSS Sintaxis
CSS Su uso
CSS Fondo
CSS Texto
CSS Fuente
CSS Bordes
CSS Contorno
CSS Margen
CSS Padding
CSS Lista
CSS Tablas

Avanzado

CSS Dimensiones
CSS Efectos Visuales
CSS Ubicación
CSS Contenido/Numerac.
CSS Pseudo Class
CSS Pseudo Element
CSS Tipos de Medios

Ejemplos y Examen

CSS Ejemplos
CSS Examen

Guías de referencia

CSS Guía de Referencia
CSS Colores
CSS Código de Colores

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.

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 Ej.
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


¿No encuentras lo que buscas?



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

Artículos

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...



Búsqueda

 

Otros tutoriales

HTML
Herramientas Utiles
Diseño de formularios

Artículos

Gana Dinero Mientras Duermes

Los Mejores 10 Hostings

Recomendados

LaWebdelProgramador
Desarrolloweb
Frogx.three

    Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

Copyright 2007 - 2011 by Martín Solomiak. Todos los derechos reservados.


webmaster@virtualnauta.com

Mapa del sitio Valid XHTML 1.0 Transitional Valid CSS!