Layout do CSS - width e max-width

Usando width, max-width e margin: auto;

Como mencionado no capítulo anterior, os elementos de bloco sempre ocupam toda a largura disponível (tendo preferência por estender-se para a direita e para a esquerda tanto quanto possível).

Configure a largura de elementos de bloco largura Isso evitará que ele se estenda até os limites do seu contêiner. Em seguida, você pode configurar o margem para auto para centralizar o elemento horizontalmente em seu contêiner. O elemento ocupará a largura especificada, e o espaço restante será distribuído uniformemente entre os dois margens:

A largura do elemento <div> é de 500px, e o margem está configurado para auto.

Atenção:Quando a janela do navegador for menor que a largura do elemento, a parte superior dessa <div> pode causar problemas. O navegador adicionará uma barra de rolagem horizontal à página.

Neste caso, usar max-width Isso pode melhorar o manejo do navegador de pequenas janelas. É importante para tornar o site acessível em dispositivos pequenos:

O elemento <div> tem uma largura máxima de 500px e a margem configurada como auto.

Dica:Ajuste o tamanho da janela do navegador para menos de 500 pixels para ver a diferença entre os dois divs!

Este é um exemplo dos dois divs acima:

Exemplo

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px sólido #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px sólido #73AD21;
}

Experimente você mesmo