Teoría
Teoría

Ancho y alto

El ancho y el alto de las cajas se definen con las propiedades width y height, respectivamente.

De forma predeterminada, las cajas de bloque ocupan todo el ancho disponible, que corresponde al ancho del contenedor padre o de la ventana del navegador.

El alto de una caja de bloque depende de su contenido. Si le asignas un ancho y un alto que no permiten que quepa todo el contenido, este se «desbordará» de la caja.

Las cajas de texto en línea no responden al ancho ni al alto que se les asigna con CSS.

Por ejemplo, puedes definir las dimensiones de un elemento así:

.selector {
  width: 100px;
  height: 100px;
}

Para recuperar los valores predeterminados, usa el valor especial auto:

.selector {
  width: auto;
  height: auto;
}

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Ancho y alto</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="example">Las cajas de bloque ocupan todo el ancho disponible de forma predeterminada. Su alto depende del contenido.</div> <div><span class="example">Las propiedades width y height no cambian las dimensiones de estas cajas de texto en línea.</span></div> </body> </html>

CSS

div { margin: 20px; padding: 10px; } .example { }

ObjetivosRealizado

Asigna un ancho de 100px a los elementos de la clase example.
Asígnales también un alto de 100px.

Observa cómo se desborda el texto y cómo se comporta el elemento span.