Propiedades Ancho y altura con CSS

Hola amigos hoy aprenderemos un tema básico de CSS, vamos a ver las propiedades Ancho y altura, para todos los que recién se están iniciando en el mundo del diseño web. Espero que este pequeño tutorial sea de mucha ayuda para todos ustedes.

Aprendiendo propiedades Ancho y Altura con CSS

Estableciendo propiedad Width (Ancho) en CSS

Esta propiedad es quizás la mas utilizada cuando hagas el diseño CSS de tus paginas web, pues porque no decirlo que es tan indispensable como otras propiedades que a diario siempre utilizamos.

Como usar la propiedad Width css

Veamos entonces que la propiedad width nos va a permitir establecer una anchura directamente mediante una medida que nosotros le proporcionaremos ya sea en pixeles o porcentajes.

Entonces veamos unos pequeños ejemplos de como se establece la anchura a un <div>, de modo que no ocupe todo el sitio disponible:

div { width: 250px; }

Si utilizaríamos una clase o un identificador tuviéramos que hacerlo de esta manera :

#ancho { width : 250px; }

.ancho { width: 250px; }

Como ya sabrás los identificadores se representan con un signo de numeral (#), mientras que las clases lo hacemos con un punto.

Algunas aclaraciones sobre el uso del width css

Si bien es cierto cuando hagamos varios div ya sea con identificadores o clases, y si ya desde luego utilizamos pixeles, por lo general tenemos que saber que es un elemento de bloque, lo que significa que si se coloca seguido otro <div> idéntico, se mostrarán uno debajo de otro:

Otras aclaraciones sobre el uso del width css con porcentajes

Debemos también tener en cuenta de que no es lo mismo utilizar un estilo width con px y otro estilo Width con % , son dos cosas distintas ya que una por lo general tiene otras dimensiones que la otra.

Estableciendo propiedad Height (Altura) en CSS

Como podemos apreciar esta también es una de las propiedades en CSS muy utilizadas.

Tomemos en cuenta lo siguiente que esta propiedad height también no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura.

El valor inherit indica que la altura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

Veamos este pequeño ejemplo sobre como utilizar esta pequeña propiedad :

#altura{ height: 60px; }

<div id="altura">
  ...
</div>