Medición de tamaños

3.1 Propiedad width

Los tamaños de los bloques en CSS juegan un papel importante en la construcción de maquetas de páginas web. Determinan cómo los elementos se mostrarán e interactuarán con los elementos circundantes. Ahora vamos a analizar las propiedades width, height, max-width y max-height, que permiten establecer los tamaños de los bloques.

La propiedad width establece el ancho de un elemento. Se puede fijar en diferentes unidades de medida, como píxeles (px), porcentajes (%), em, rem y otras.

Valores

• Valor automático: auto — el ancho del elemento se determina automáticamente en función de su contenido y entorno
• Unidades absolutas: px, pt, cm, mm, in y otras
• Unidades relativas: %, em, rem, vw, vh y otras

Ejemplo de uso:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Ancho fijo (200px)</div>
      <div class="box box-percentage">Ancho en porcentaje (50%)</div>
    
  

Explicación del código:

• .box-fixed: elemento con ancho fijo de 200 píxeles
• .box-percentage: elemento con un ancho del 50% del elemento padre

3.2 Propiedad height

La propiedad height establece la altura de un elemento. También puede fijarse en diferentes unidades de medida.

Valores:

• Valor automático: auto — la altura del elemento se determina automáticamente en función de su contenido y entorno
• Unidades absolutas: px, pt, cm, mm, in y otras
• Unidades relativas: %, em, rem, vh, vw y otras

Ejemplo de uso:

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Altura fija (150px)</div>
        <div class="box box-percentage-height">Altura en porcentaje (50%)</div>
      </div>
    
  

Explicación del código:

• .box-fixed-height: elemento con altura fija de 150 píxeles
• .box-percentage-height: elemento con una altura del 50% del elemento padre

3.3 Propiedad max-width

La propiedad max-width establece el ancho máximo de un elemento. Es una restricción que previene que el elemento se expanda más allá del valor establecido.

Valores:

• Sin restricción: none — el elemento puede expandirse a cualquier ancho
• Unidades absolutas: px, pt, cm, mm, in y otras
• Unidades relativas: %, em, rem, vh, vw y otras

Ejemplo de uso:

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">Ancho 100% (por defecto)</div>
      <div class="box box-max-width">Ancho máximo 300px</div>
    
  

Explicación del código:

• .box-max-width: elemento con un ancho máximo de 300 píxeles. El contenido no permitirá que el elemento se expanda más allá de 300 píxeles

3.4 Propiedad max-height

La propiedad max-height establece la altura máxima de un elemento. Es una restricción que previene el incremento del elemento más allá del valor establecido.

Valores:

• Sin restricción: none — el elemento puede expandirse a cualquier ancho
• Unidades absolutas: px, pt, cm, mm, in y otras
• Unidades relativas: %, em, rem, vh, vw y otras

Ejemplo de uso:

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Texto adicional para demostrar el scroll.<br>Texto adicional para demostrar el scroll.<br>Texto adicional para demostrar el scroll.</p>
      </div>
    
  

Explicación del código:

• .max-height: elemento con una altura máxima de 35 píxeles. Si el contenido del elemento excede este valor, se desplazará gracias a la propiedad overflow: auto;