Medindo Tamanhos

3.1 Propriedade width

Os tamanhos dos blocos em CSS têm um papel importante na construção de layouts para páginas web. Eles determinam como os elementos serão exibidos e interagirão com os elementos ao redor. Agora vamos ver as propriedades width, height, max-width e max-height, que permitem definir os tamanhos dos blocos.

A propriedade width define a largura de um elemento. Ela pode ser definida em várias unidades de medida, como pixels (px), porcentagens (%), em, rem e outras.

Valores

• Valor automático: auto — a largura do elemento é determinada automaticamente com base no seu conteúdo e ambiente
• Unidades absolutas: px, pt, cm, mm, in e outras
• Unidades relativas: %, em, rem, vw, vh e outras

Exemplo 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">Largura fixa (200px)</div>
      <div class="box box-percentage">Largura em porcentagem (50%)</div>
    
  

Explicação do código:

• .box-fixed: elemento com largura fixa de 200 pixels
• .box-percentage: elemento com largura de 50% do elemento pai

3.2 Propriedade height

A propriedade height define a altura de um elemento. Ela também pode ser definida em várias unidades de medida.

Valores:

• Valor automático: auto — a altura do elemento é determinada automaticamente com base no seu conteúdo e ambiente
• Unidades absolutas: px, pt, cm, mm, in e outras
• Unidades relativas: %, em, rem, vh, vw e outras

Exemplo 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 fixa (150px)</div>
        <div class="box box-percentage-height">Altura em porcentagem (50%)</div>
      </div>
    
  

Explicação do código:

• .box-fixed-height: elemento com altura fixa de 150 pixels
• .box-percentage-height: elemento com altura de 50% do elemento pai

3.3 Propriedade max-width

A propriedade max-width define a largura máxima de um elemento. É uma limitação que impede o elemento de se expandir além do valor definido.

Valores:

• Sem limitação: none — o elemento pode se expandir até qualquer largura
• Unidades absolutas: px, pt, cm, mm, in e outras
• Unidades relativas: %, em, rem, vh, vw e outras

Exemplo de uso:

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

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

    
      <div class="box">Largura 100% (por padrão)</div>
      <div class="box box-max-width">Largura máxima 300px</div>
    
  

Explicação do código:

• .box-max-width: elemento com largura máxima de 300 pixels. O conteúdo não permitirá que o elemento se expanda além de 300 pixels

3.4 Propriedade max-height

A propriedade max-height define a altura máxima de um elemento. É uma limitação que impede que o elemento aumente além do valor definido.

Valores:

• Sem limitação: none — o elemento pode se expandir até qualquer largura
• Unidades absolutas: px, pt, cm, mm, in e outras
• Unidades relativas: %, em, rem, vh, vw e outras

Exemplo de uso:

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

    
      <div class="box">
        <p>Texto adicional para demonstrar rolagem.<br>Texto adicional para demonstrar rolagem.<br>Texto adicional para demonstrar rolagem.</p>
      </div>
    
  

Explicação do código:

• .box-max-height: elemento com altura máxima de 100 pixels. Se o conteúdo do elemento exceder este valor, ele será rolado graças à propriedade overflow: auto;