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