Diseño CSS: la propiedad de visualización

Tabla de contenido

La propiedad display es la propiedad CSS más importante para controlar el diseño.

La propiedad de visualización

La propiedad display especifica si y cómo se muestra un elemento.

Cada elemento HTML tiene un valor de visualización predeterminado según el tipo. de elemento que es. El valor de visualización predeterminado para la mayoría de los elementos es bloque o en línea.

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 a nivel de bloque

Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha lo más que puede).

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

Ejemplos de elementos a nivel de bloque:

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

Elementos en línea

Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.

Este es un elemento <span> en línea dentro de un párrafo.

Ejemplos de elementos en línea:

<span>
<a>
<img>

Declaración HTML `Pantalla: ninguna;`

display: none; se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos ni recrearlos. Échale un vistazo a nuestro último ejemplo en esta página si desea saber cómo se puede lograr esto.

El elemento <script> utiliza display: none; por defecto.

Anular el valor de visualización predeterminado

Como se mencionó, cada elemento tiene un valor de visualización predeterminado. Sin embargo, puedes anular esto.

Cambiar un elemento en línea a un elemento de bloque, o viceversa, puede ser útil para hacer que la página se vea de una manera específica y seguir los estándares web.

Un ejemplo común es crear elementos <li> en línea para menús horizontales:

Ejemplo

li {
  display: inline;
}

Pruébelo usted mismo →

<!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>

Nota: Establecer la propiedad de visualización de un elemento solo cambia cómo se muestra el elemento. NO qué tipo de elemento es. Por lo tanto, no se permite un elemento en línea con display: block; tener otros elementos de bloque dentro de él.

El siguiente ejemplo muestra elementos <span> como elementos de bloque:

Ejemplo

span {
  display: block;
}

Pruébelo usted mismo →

<!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>

El siguiente ejemplo muestra elementos <a> como elementos de bloque:

Ejemplo

a {
  display: block;
}

Pruébelo usted mismo →

<!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 un elemento: visualización: ninguna o visibilidad: oculta?

style="wrap">display:none

visibility:hidden

Reset

Se puede ocultar un elemento estableciendo la propiedad display en ninguno. El elemento se ocultará y la página se mostrará como si el elemento no estuviera allá:

Ejemplo

h1.hidden {
  display: none;
}

Pruébelo usted mismo →

<!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; también oculta un elemento.

Sin embargo, el elemento seguirá ocupando el mismo espacio. como antes. El elemento estará oculto, pero seguirá afectando el diseño:

Ejemplo

h1.hidden {
  visibility: hidden;
}

Pruébelo usted mismo →

<!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>

Más ejemplos

Este ejemplo demuestra display: none; versus visibilidad: oculto;

Diferencias entre visualización: ninguna; y visibilidad: 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 ejemplo demuestra cómo usar CSS y JavaScript para mostrar un elemento en hacer clic.

Usar CSS junto con JavaScript para mostrar contenido

<!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>

Propiedades de visualización/visibilidad CSS

display: Especifica cómo se debe mostrar un elemento.
visibility: Especifica si un elemento debe ser visible o no.

Diseño CSS: la propiedad de visualización

Tabla de contenido

La propiedad de visualización

Elementos a nivel de bloque

Elementos en línea

Declaración HTML Pantalla: ninguna;

Anular el valor de visualización predeterminado

Ejemplo

Ejemplo

Ejemplo

Ocultar un elemento: visualización: ninguna o visibilidad: oculta?

Ejemplo

Ejemplo

Más ejemplos

Propiedades de visualización/visibilidad CSS

Declaración HTML `Pantalla: ninguna;`