Layout CSS – largura e largura máxima


Usando largura, largura máxima e margem: auto;

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>


 

Categoria: curso css | Tags: , , , , , , , , , , | Postado por joemaster em 03/jul/2020

<< Anterior

Próximo >>

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *