Mise en page CSS - La propriété d'affichage

Table des matières

    Afficher la table des matières

La propriété display est la propriété CSS la plus importante pour contrôler la mise en page.

La propriété d'affichage

La propriété display spécifie si/comment un élément est affiché.

Chaque élément HTML a une valeur d'affichage par défaut en fonction du type de l'élément dont il s'agit. La valeur d'affichage par défaut pour la plupart des éléments est block ou en ligne.

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

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).

Éléments de niveau bloc

Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible (s'étend à gauche et à droite aussi loin que possible).

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

Exemples d'éléments de niveau bloc :

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

Éléments en ligne

Un élément en ligne ne commence pas sur une nouvelle ligne et n'occupe que la largeur nécessaire.

Il s'agit d'un un élément <span> en ligne à l'intérieur d'un paragraphe.

Exemples d'éléments en ligne :

<span>
<a>
<img>

Instruction HTML Affichage : aucun ;

affichage : aucun ; est couramment utilisé avec JavaScript pour masquer et afficher les éléments sans les supprimer ni les recréer. Jetez un oeil à notre dernier exemple sur cette page si vous voulez savoir comment cela peut être réalisé.

L'élément <script> utilise display: none; par défaut.

Remplacer la valeur d'affichage par défaut

Comme mentionné, chaque élément a une valeur d'affichage par défaut. Cependant, vous pouvez remplacer cela.

Changer un élément en ligne en élément de bloc, ou vice versa, peut être utile pour donner à la page une apparence spécifique, tout en respectant les normes du Web.

Un exemple courant consiste à créer des éléments <li> en ligne pour les menus horizontaux :

Exemple

li {
  display: inline;
}

Essayez-le vous-même →

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

Remarque : La définition de la propriété d'affichage d'un élément modifie uniquement la façon dont l'élément est affiché, PAS de quel type d'élément il s'agit. Ainsi, un élément en ligne avec display: block; n'est pas autorisé pour avoir d’autres éléments de bloc à l’intérieur.

L'exemple suivant affiche les éléments <span> sous forme d'éléments de bloc :

Exemple

span {
  display: block;
}

Essayez-le vous-même →

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

L'exemple suivant affiche les éléments <a> sous forme d'éléments de bloc :

Exemple

a {
  display: block;
}

Essayez-le vous-même →

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

Masquer un élément - affichage : aucun ou visibilité : caché ?

display:none

Italy

visibility:hidden

Forest

Reset

Lights

<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"; }

Le masquage d'un élément peut être effectué en définissant la propriété display sur aucun. L'élément sera masqué et la page sera affichée comme si l'élément n'était pas là:

Exemple

h1.hidden {
  display: none;
}

Essayez-le vous-même →

<!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; masque également un élément.

Cependant, l'élément occupera toujours le même espace comme avant. L'élément sera masqué, mais affectera toujours la mise en page :

Exemple

h1.hidden {
  visibility: hidden;
}

Essayez-le vous-même →

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

Plus d'exemples

Cet exemple montre display: none; versus visibilité : caché ;

Différences entre l'affichage : aucune ; et visibilité : cachée ;

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

Cet exemple montre comment utiliser CSS et JavaScript pour afficher un élément sur Cliquez sur.

Utiliser CSS avec JavaScript pour afficher le contenu

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

Propriétés d'affichage/visibilité CSS

display

Spécifie comment un élément doit être affiché

visibility

Spécifie si un élément doit être visible ou non