Layout CSS - A propriedade display

Índice

A propriedade display é a propriedade CSS mais importante para controlar o layout.

A propriedade de exibição

A propriedade display especifica se/como um elemento é exibido.

Cada elemento HTML tem um valor de exibição padrão dependendo do tipo de elemento é. O valor de exibição padrão para a maioria dos elementos é block ou em linha.

Click to show panel

This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

Elementos em nível de bloco

Um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível (estica-se para a esquerda e para a direita o máximo que pode).

The <div> element is a block-level element.

Exemplos de elementos em nível de bloco:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Elementos embutidos

Um elemento embutido não começa em uma nova linha e ocupa apenas a largura necessária.

Este é um elemento <span> embutido dentro de um parágrafo.

Exemplos de elementos embutidos:

<span>
<a>
<img>

Instrução HTML `Exibição: nenhum;`

display: none; é comumente usado com JavaScript para ocultar e mostrar elementos sem excluí-los e recriá-los. Dê uma olhada em nosso último exemplo nesta página se você quiser saber como isso pode ser alcançado.

O elemento <script> usa display: none; como padrão.

Substituir o valor de exibição padrão

Conforme mencionado, cada elemento possui um valor de exibição padrão. No entanto, você pode substituir isso.

Alterar um elemento inline para um elemento de bloco, ou vice-versa, pode ser útil para fazendo com que a página tenha uma aparência específica e ainda siga os padrões da web.

Um exemplo comum é criar elementos <li> embutidos para menus horizontais:

Exemplo

li {
  display: inline;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Observação: definir a propriedade display de um elemento altera apenas como o elemento é exibido, NÃO que tipo de elemento é. Portanto, um elemento embutido com display: block; não é permitido ter outros elementos de bloco dentro dele.

O exemplo a seguir exibe elementos <span> como elementos de bloco:

Exemplo

span {
  display: block;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<h1>Display span elements as block elements</h1>

<span>A display property with</span> <span>a value of "block" results in</span> <span>a line break between each span elements.</span>

</body>
</html>

O exemplo a seguir exibe elementos <a> como elementos de bloco:

Exemplo

a {
  display: block;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<h1>Display links as block elements</h1>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>

Ocultar um elemento - display:none ou visibilidade:hidden?

style="wrap">display:none

visibility:hidden

Reset

Ocultar um elemento pode ser feito definindo a propriedade display como nenhum. O elemento ficará oculto e a página será exibida como se o elemento não estivesse lá:

Exemplo

h1.hidden {
  display: none;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>

visibility:hidden; também oculta um elemento.

No entanto, o elemento ainda ocupará o mesmo espaço como antes. O elemento ficará oculto, mas ainda afetará o layout:

Exemplo

h1.hidden {
  visibility: hidden;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>

Mais exemplos

Este exemplo demonstra display: none; versus visibilidade: oculto;

Diferenças entre exibição: nenhuma; e visibilidade: oculta;

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
  float: left;
  text-align: center;
  width: 120px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

button {
  width: 100%;
}
</style>
</head>
<body>

<h3>Difference between display:none and visiblity: hidden</h3>
<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in the layout.</p>
<p><strong>display:none</strong> removes the element from the document. It does not take up any space.</p>

<div class="imgbox" id="imgbox1">Box 1<br>
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  <button onclick="removeElement()">Remove</button>
</div>

<div class="imgbox" id="imgbox2">Box 2<br>
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <button onclick="changeVisibility()">Hide</button>
</div>

<div class="imgbox">Box 3<br>
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  <button onclick="resetElement()">Reset All</button>
</div>

<script>
function removeElement() {
  document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>

Este exemplo demonstra como usar CSS e JavaScript para mostrar um elemento em clique.

Usando CSS junto com JavaScript para mostrar conteúdo

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>This panel contains a div element, which is hidden by default (display: none).</p>
  <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
  <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p>
  <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>

Propriedades de exibição/visibilidade CSS

display: Especifica como um elemento deve ser exibido
visibility: Especifica se um elemento deve ou não estar visível

Layout CSS - A propriedade display

Índice

A propriedade de exibição

Elementos em nível de bloco

Elementos embutidos

Instrução HTML Exibição: nenhum;

Substituir o valor de exibição padrão

Exemplo

Exemplo

Exemplo

Ocultar um elemento - display:none ou visibilidade:hidden?

Exemplo

Exemplo

Mais exemplos

Propriedades de exibição/visibilidade CSS

Instrução HTML `Exibição: nenhum;`