Introduction - width and height properties

Puedes no haberlo pensado hasta ahora, pero todos los elementos en una página web tienen dimensiones. No es necesario especificarlas, gracias al modelo de formato predeterminado - los elementos toman el espacio que necesitan, y si no hay suficiente para ellos, son colocados automáticamente en una dirección con más espacio disponible. Todo esto ocurre gracias al hecho de que las propiedades de width (ancho) y height (alto) de un elemento toman el valor de "auto" por defecto, haciendo que el elemento se expanda o encoja dependiendo de su contenido.

Deberias estar conciente de la diferencia entre elementos "Inline" y "Block" hablando de sus dimensiones ya que son completamente diferentes. Por defecto, un elemento "Inline" solo consume el espacio vertical y horizontal necesario que ocupa el contenido. Por otro lado, un elemento "Block" usara todo el espacio horizontal disponible y el espacio vertical que ocupa el contenido. Por lo tanto, solo los elementos "Block" pueden tener un ancho y una altura personalizada y especifica, como se puede observar en el siguiente ejemplo:

<style type="text/css">
.box-look {
	background-color: Silver;
	margin: 20px;
	padding: 10px;
}

#box1 {
	width: auto;
	height: auto;
}

#box2 {
	width: 100px;
	height: 100px;
}
</style>

<div id="box1" class="box-look">
	Box 1<br>
	Some content....
</div>

<div id="box2" class="box-look">
	Box 2<br>
	Long text is automatically wrapped...
</div>

<span class="box-look">
	Inline content. Only uses the space it needs...
</span>

Si pruebas este ejemplo, podrás ver que el primer recuadro ocupa todo el espacio en horizontal, mientras que el segundo recuadro ocupa sólo los 100 píxeles que le asignamos en ambas direcciones. Los elementos de tipo div son por defecto elementos de recuadro. Ten en cuenta que he especificado el ancho y el alto de box1 como auto para ilustrar la diferencia - estos ya tienen los valores predeterminados, por lo que se pueden omitir.

El ultimo elemento es una etiqueta "span", que por defecto es un elemento "Inline" y como puede observar, solo utiliza el espacio requerido. Podria intentar asignar una altura o anchura a este elemento, pero el buscador lo ignoraria por completo - solo los elementos "Block" pueden tener anchura y altura personalizada.

Anchura y altura relativa y absoluta

Ya vimos como podemos definir anchuras y alturas como valores absolutos en pixeles, pero esa es solo una de muchas opciones! Las propiedades de anchura y altura pueden tomar un valor de [Longitud] o de [Porcentaje], lo que significa que usted puede utilizar valores absolutos y relativos, ya sea como un porcentaje o relativo a un tamaño de fuente (como la unidad em - veremos mas de ella mas adelante).

In the next example, I'll show you how we can use percentage values to take up a relative share of the available space:

<style type="text/css">
#parent-box {
	width: 300px;
	height: 300px;
}

#box1 {
	width: 25%;
	height: 75%;
}

#box2 {
	width: 75%;
	height: 25%;
}
</style>

<div id="parent-box" style="background-color: CornflowerBlue;">

	<div id="box1" style="background-color: GreenYellow;">
		Box 1<br>
		Some content....
	</div>

	<div id="box2" style="background-color: Salmon;">
		Box 2<br>
		Long text is automatically wrapped, if needed...
	</div>

</div>

In this example, we have a box with an absolute size acting as a parent box, and inside of it, we have two smaller boxes, which uses a relative amount of the available parent space, just to show you how easy it is to do.

En resumen

In this chapter, we talked about how block level elements on a webpage will automatically adjust their sizes and how we can force them to be of a specific size by using the width and height properties. But what happens if we specify a width and a height which doesn't leave enough room for the content? We'll look into that in the next chapter.