Como mencionado no capítulo anterior; um elemento no nível do bloco sempre ocupa toda a largura disponível (se estende para a esquerda e direita o máximo possível).
A configuração widthde um elemento no nível do bloco impedirá que ele se estenda para as bordas do seu contêiner. Em seguida, você pode definir as margens como automáticas, para centralizar horizontalmente o elemento dentro de seu contêiner. O elemento ocupará a largura especificada e o espaço restante será dividido igualmente entre as duas margens:
Dica: redimensione a janela do navegador para menos de 500 px de largura, para ver a diferença entre as duas divs!
Aqui está um exemplo das duas divs acima:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width:500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>
<< Anterior Layout CSS – A propriedade display
Deixe um comentário