[CSS] [proprietà] display

display (proprietà CSS) imposta se debba essere visualizzato l’elemento HTML. Nel caso di display:inline-block, l’elemento è inline ma con caratteristiche block, avendo proprietà height, margin, padding e width per tutti e quattro i suoi lati. Nel caso di display:none, l’elemento non è mostrato perché non è presente nella pagina, mentre nel caso di visibility:hidden l’elemento è presente nella pagina ma semplicemente è invisibile quindi continua ad occupare lo spazio nella pagina.

Sintassi

[selettore] {
  display: block|inline|inline-block|none|display;
}

Esempi

<style>
.displayblock_1 {
    display: block;
}
</style>
<span>Elemento inline (di default).</span>
<span>Elemento inline (di default).</span>
<span class="displayblock_1">Elemento block.</span>

Elemento inline (di default).Elemento inline (di default).Elemento block.

<style>
.displayinline_1 {
    display: inline;
}
</style>
<p>Elemento block (di default).</p>
<p>Elemento block (di default).</p>
<p class="displayinline_1">Elemento inline.</p>
<p class="displayinline_1">Elemento inline.</p>

Elemento block (di default).

Elemento block (di default).

Elemento inline.

Elemento inline.

<style>
.displayinline_3 {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid yellow;
}
</style>
<div class="displayinline_3">box 1</div>
<div class="displayinline_3">box 2</div>
<div class="displayinline_3">box 3</div>
<div class="displayinline_3">box 4</div>
<div class="displayinline_3">box 5</div>

box 1
box 2
box 3
box 4
box 5
<style>
.displaynone_1 { display:none; }
.visibilityhidden_1 { visibility:hidden; }
</style>
<script>
jQuery(document).ready(function($) {
  $("#displaynone_button").click(function() {
    $(".displaynone_1").show();
    $("#displaynone_button").hide();
  });
  $("#visibilityhidden_button").click(function() {
    $(".visibilityhidden_1").css('visibility', 'visible');
    $("#visibilityhidden_button").hide();
  });
})
</script>
<div style="text-align:center">testo sopra visibility:hidden</div><p class="visibilityhidden_1">Elemento hidden.</p><p class="visibilityhidden_1">Elemento hidden.</p><div style="text-align:center">testo sotto visibility:hidden</div>
<button type="button" id="visibilityhidden_button">visualizza Elemento "visibility:hidden"</button>
<div style="text-align:center">testo sopra display:none</div><p class="displaynone_1">Elemento none.</p><p class="displaynone_1">Elemento none.</p><div style="text-align:center">testo sotto display:none</div>
<button type="button" id="displaynone_button">visualizza Elemento "display:none"</button>

testo sopra visibility:hidden

Elemento hidden.

Elemento hidden.

testo sotto visibility:hidden

testo sopra display:none

Elemento none.

Elemento none.

testo sotto display:none

Contenuti correlati

  • CSS
  • HTML
  • JavaScript
  • jQuery
  • PHP
  • SQL
  • WORDPRESS

Fonti esterne

css, proprietà css

Related Articles

0 Comment

Rispondi