affichage: en ligne vs affichage: bloc

Quelle est la différence fondamentale entre le CSS suivant:

display:inline

et ça:

display:block

En les utilisant séparément sur un élément, j'obtiens le même résultat.

display: block signifie que l'élément est affiché sous forme de bloc, comme l'ont toujours été les paragraphes et les en-têtes. Un bloc a des espaces au-dessus et au-dessous et ne tolère aucun élément HTML à côté de lui, sauf dans l'ordre contraire (en ajoutant une déclaration float à un autre élément, par exemple).

display: inline signifie que l'élément est affiché en ligne, à l'intérieur du bloc courant sur la même ligne. Ce n'est que lorsqu'il est entre deux blocs que l'élément forme un «bloc anonyme», qui a cependant la plus petite largeur possible.

En savoir plus sur les options d'affichage: http://www.quirksmode.org/css/display.html

Bloquer

Prend toute la largeur disponible, avec une nouvelle ligne avant et après (display: block;)

En ligne

Prend autant de largeur que nécessaire et ne force pas de nouvelles lignes (display: inline;)

display: block - un saut de ligne avant et après l'élément

display: inline - pas de saut de ligne avant ou après l'élément

Voici un tableau de comparaison:

Vous pouvez voir des exemples ici.

display: block;crée un élément de niveau bloc , alors que display: inline;crée un élément de niveau en ligne . Il est un peu difficile d'expliquer la différence si vous n'êtes pas familier avec le modèle de boîte css, mais il suffit de dire que les éléments de niveau bloc interrompent le flux d'un document, contrairement aux éléments en ligne.

Voici quelques exemples d'éléments de niveau bloc comprennent: div, h1, pet hrbalises HTML.

Voici quelques exemples d'éléments de niveau inline comprennent: a, span, strong, em, bet ibalises HTML.

Personnellement, j'aime penser aux éléments en ligne comme des éléments typographiques . Ce n'est pas entièrement ou techniquement correct, mais pour la plupart, les éléments en ligne se comportent beaucoup comme du texte.

Vous pouvez lire un article plus détaillé sur le sujet ici . Vu que plusieurs autres personnes dans ce fil l'ont cité, cela vaut peut-être la peine d'être lu.

Bloc de visualisation prendra toute la ligne c'est à dire sans saut de ligne

Affichage: en ligne ne prendra que l'espace exact dont il a besoin.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

Vous pouvez vous référer à l'exemple de ce violon http://jsfiddle.net/RJXZM/1/ .

les éléments de bloc se développent pour remplir leur parent.

les éléments en ligne se contractent pour être juste assez grands pour contenir leurs enfants.

bloc de visualisation

prend toute la ligne (100%) de l'écran, c'est toujours 100% de la taille de l'écran

exemple de bloc d'affichage

affichage: le bloc en ligne occupe autant de largeur que nécessaire, il peut être de 1% à 100% de la taille de l'écran

afficher un exemple de bloc en ligne

c'est pourquoi nous avons div et span

Le style par défaut de Div est le bloc d'affichage: il prend toute la largeur de l'écran

le style par défaut de span est display: inline block: span ne commence pas sur une nouvelle ligne et prend seulement autant de largeur que nécessaire

Ajoutez une couleur d'arrière-plan à l'élément et vous verrez bien la différence entre en ligne et en bloc, comme expliqué par les autres affiches.

Display: block Il se comporte très bien de la même manière que les balises 'p' et il occupe toute la ligne et il ne peut y avoir aucun élément à côté de lui jusqu'à ce qu'il flotte. Affichage: en ligne Il utilise juste autant d'espace que nécessaire et permet à d'autres éléments d'être alignés le long de lui-même.

Utilisez ces propriétés dans le cas des formulaires et vous obtiendrez une meilleure compréhension.

un bloc ou un bloc en ligne peut avoir une largeur (par exemple, largeur: 400px) tandis que l'élément en ligne n'est pas affecté par la largeur. L'élément inline peut s'étendre jusqu'à la ligne de texte suivante (exemple http://codepen.io/huijing/pen/PNMxXL redimensionner la fenêtre de votre navigateur pour voir cela) alors que l'élément bloc ne le peut pas.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Éléments de bloc : Les éléments aimés div, p, les en-têtes sont au niveau du bloc. Ils partent d'une nouvelle ligne et occupent toute la largeur de l'élément parent. Éléments en ligne : Les éléments aimés b, i, span, img sont de niveau en ligne. Ils ne partent jamais d'une nouvelle ligne et occupent la largeur du contenu.

Par défaut, les éléments en ligne ne forcent pas une nouvelle ligne à commencer dans le flux de documents. Les éléments de bloc, par contre, provoquent généralement un saut de ligne, vous pouvez faire référence à ce lien