Layout CSS - largura e largura máxima
Usando largura, largura máxima e margem: auto;
Conforme mencionado no capítulo anterior; um elemento de nível de bloco sempre ocupa toda a largura disponível (se estende para a esquerda e para a direita o máximo possível).
Definir o widthde um elemento de nível de bloco impedirá que ele se estenda até as bordas de seu contêiner. Em seguida, você pode definir as margens como automáticas, para centralizar horizontalmente o elemento em seu contêiner. O elemento ocupará a largura especificada e o espaço restante será dividido igualmente entre as duas margens:
Nota: O problema <div>acima ocorre quando a janela do navegador é menor que a largura do elemento. O navegador adiciona uma barra de rolagem horizontal à página.
Usar max-widthem vez disso, nessa situação, melhorará o manuseio de janelas pequenas pelo navegador. Isso é importante ao tornar um site utilizável em dispositivos pequenos:
Dica: Redimensione a janela do navegador para menos de 500px de largura, para ver a diferença entre as duas divs!
Aqui está um exemplo das duas divs acima:
Exemplo
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}