As propriedades CSS width, min-width e max-width

Introdução

As propriedades width, min-width e max-width se destinam a definir a largura dos boxes.

Valores válidos para a propriedades que definem larguras

• comprimento: um valor CSS para comprimento (px, em, pt, etc)
• porcentagem: um valor expressso em porcentagem;
• auto: um valor que depende dos valores de outras propriedades;

O valor inicial (padrão) desta propriedade é auto. A largura inicial do box é igual à largura total do seu elemento-pai

Valores declarados com uso de porcentagem são calculados em relação à largura (width) do bloco de conteúdo (o elemento-pai do box).

Não é válido declarar valores negativos para width.

Na prática usam-se as propriedades min-width e max-width em conjunto com a propriedade width com a finalidade de estabelecer valores mínimo e máximo para uma largura definida em porcentagem.

width em px

<div>
  Eu sou um elemento DIV com 300px de largura.
</div>

div { 
  width: 300px; 
  background: skyblue;
}

A renderização do código acima é conforme mostrado a seguir:

width em %

<div>
  Eu sou um elemento DIV com 70% de largura.
</div>

div { 
  width: 70%; 
  background: skyblue;
}

A renderização do código acima é conforme mostrado a seguir:

width auto

<div>
  Eu sou um elemento DIV com largura de valor auto.
</div>

div { 
  width: auto; 
  background: skyblue;
}

A renderização do código acima é conforme mostrado a seguir:

max-width

<div>
  DIV
</div>

div { 
  width: 100%;
  max-width: 800px;
  margin: 0 auto;  
  background: skyblue;
}

A renderização do código acima é conforme mostrado a seguir:

Neste exemplo o elemento DIV se estenderá por toda a largura do seu elemento-pai até que a largura deste elemento atinga os 800px e a partir daí o DIV terá largura fixa de 800px e será centrado horizontalmente no seu elemento-pai.

Essa é uma técnica muito usada em design responsivo para fazer com que um box se estenda por toda a largura da viewport (em dispositivos com pequena largura) até que a viewport atinja uma determinada largura quando o box terá largura fixa mesmo com a viewport continuando a crescer em largura. Por exemplo: em dispositivos com largura de viewport até 1000px o layout do site (ou da aplicação) ocupará toda a largura da viewport e a partir daí o layout terá largura fixa de 1000px centrado horizontalmente na janela do navegador.

Para a propriedade min-width o comportamento é semelhante e aplica-se à largura mínima não permitindo que o DIV "contraia" mais que o valor declarado para a propriedade.

Nota: Para saber a diferença entre os valores width e auto consulte o tutorial Propriedade CSS width no design responsivo.

Compartilhe essa matéria com seus amigos