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

visualizações (desde 02/06/2016) Publicado em: 04/06/2016

Definindo largura para os elementos HTML

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

...
<style rel="stylesheet">
  div { 
    width: 300px; 
    background: skyblue;
    }
</style>
</head>
<body>
  <div>Eu sou um elemento DIV com 300px de largura.</div>
</body>
</html>

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

Eu sou um elemento DIV com 300px de largura.

`width` em %

...
<style rel="stylesheet">
  div { 
    width: 70%; 
    background: skyblue;
    }
</style>
</head>
<body>
  <div>Eu sou um elemento DIV com 70% de largura.</div>
</body>
</html>

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

Eu sou um elemento DIV com 70% de largura.

`width` auto

...
<style rel="stylesheet">
  div { 
    width: auto; 
    background: skyblue;
    }
</style>
</head>
<body>
  <div>Eu sou um elemento DIV com largura de valor auto.</div>
</body>
</html>

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

Eu sou um elemento DIV com largura de valor auto.

`max-width`

...
<style rel="stylesheet">
  div { 
    width: 100%;
    max-width: 800px;
    margin: 0 auto;  
    background: skyblue;
    }
</style>
</head>
<body>
  <div>DIV</div>
</body>
</html>

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

DIV

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.