web-dev-qa-db-fra.com

Différence entre display none et display block

Quelle est la différence entre définir le style d'un contrôle display: none et display: block?

7
iJade

La propriété display définit comment un certain élément HTML doit être affiché. Afficher block et none sont utilisés pour afficher ou masquer les éléments HTML. Vous pouvez en savoir plus sur la propriété display et les options disponiblesici.

  • none: L'élément ne sera pas affiché du tout.

  • block: L'élément affiché en tant qu'élément de niveau bloc (comme les paragraphes et les en-têtes)

12
Adil

Affichage: aucun; - L'élément est dans la DOM mais n'est PAS visible et ne prend aucune space contrairement à visibility:hidden.

Bloc de visualisation; - Un élément de bloc reprend le full width disponible et ne permet pas de placer d'autres éléments à côté d'eux. Exemple: div

8
Cdeez

Ces deux propriétés de style font deux choses différentes. 

display: none supprime complètement l'élément du document. Il ne prend aucun espace, même si le code HTML utilisé est toujours dans le code source. (L'élément ne générera aucune boîte)

display: block l'élément s'étendra sur toute la largeur de l'espace disponible. (un saut de ligne avant et après l'élément)

3
Srinivasula Reddy

Il y a une autre nuance à afficher: aucune; Si vous insérez dynamiquement une div en tant qu'enfant dans un parent div - et que vous définissez explicitement la propriété de visibilité de l'enfant sur "visible", la propriété de visibilité du parent ne fera que rendre visible la propriété. parent visible/invisible; l'enfant restera visible, quel que soit le paramètre de visibilité du parent. 

Dans un tel cas (où la visibilité parent/enfant est définie par différentes règles de style), le paramètre display: none du parent volonté masque tous les enfants - même si les parents/enfants sont stylés indépendamment. texte souligné

1
Derwood Kirkwood

display: none signifie que l'élément n'est pas affiché du tout (vous ne le verrez donc pas non plus dans l'exemple).

display: block signifie que l'élément est affiché comme un bloc, comme l'ont toujours été les paragraphes et les en-têtes. Un bloc comporte des espaces au-dessus et au-dessous et ne tolère aucun élément HTML à côté, sauf ordre contraire

1
ravi gupta

Vous parlez d'une propriété CSS, je pense. Ceci est utilisé pour afficher/masquer les éléments DOM

La propriété CSS est display et la valeur est 'none', 'block', etc.

Référence de:Affichage CSScomme suggéré par http://w3fools.com/

bloc

L'objet est rendu sous forme d'élément de bloc.

aucun

L'élément n'est pas restitué. L'élément (il n'a pas d'effet sur la présentation); l'affichage de tous les éléments enfants est également désactivé. Le document est rendu comme si l'élément n'existait pas.

inline

Défaut. L'objet est rendu sous la forme d'un élément en ligne, dimensionné par les dimensions du contenu.

list-item

Internet Explorer 6 et versions ultérieures. L'objet est rendu sous forme d'élément de bloc et un marqueur d'élément de liste est ajouté.

table-header-group

L'objet est rendu en tHead. L'en-tête de la table est toujours affiché avant toutes les autres lignes et groupes de lignes et après les légendes supérieures. L'en-tête est affiché sur chaque document fractionné par une table.

groupe-pied-de-page

L'objet est rendu en tant que tFoot. Le pied de table est toujours affiché après toutes les autres lignes et groupes de lignes, et avant les légendes inférieures. Le pied de page est affiché sur chaque document recouvert par un tableau.

inline-block

L'objet est rendu en ligne, mais le contenu de l'objet est rendu sous forme d'élément de bloc. Les éléments en ligne adjacents sont rendus sur la même ligne, si l'espace est suffisant.

0
Murali Murugesan

Afficher aucun: masque le contrôle. en définissant la propriété de element style = "display: none", l'élément ne sera pas rendu dans la page Web et n'aura pas lieu

Afficher le bloc: affiche l'élément sur la page Web au niveau du bloc 

0
Sohail Hameed

Display none masquera le contenu, ici si vous l'appliquez sur div, la largeur et la hauteur de div seront également masquées. Le bloc d'affichage affichera le contenu.

0
Sky5005e

Display:none; signifie que l'élément ne sera pas affiché et Display:block; signifie que l'élément est affiché en tant qu'élément de niveau bloc (comme les paragraphes et les en-têtes).

0
coder