display:inline vs display:block

Question

Quelle est la différence fondamentale entre le CSS

display:inline et

display:block.

L'utilisation de ces séparément sur un élément, j'obtiens le même résultat.

Answer 1

display: block signifie que l'élément est affiché comme un bloc, comme les paragraphes et les en-têtes ont toujours été. Un bloc a certains espaces au-dessus et au-dessous, et ne tolère aucune des éléments HTML à côté d'elle, sauf lorsque spécifié autrement (par l'ajout d'un flotteur de déclaration à un autre élément, par exemple).

display: inline signifie que l'élément est affiché en ligne, à l'intérieur du bloc en cours sur la même ligne. Seulement quand il est entre deux blocs de l'élément forme un "bloc anonyme", qui a pourtant le plus possible la largeur.

Lire plus à propos des options d'affichage : http://www.quirksmode.org/css/display.html

Answer 2

Bloc

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

Inline

Prend autant de largeur qu'il a besoin, et ne force pas les nouvelles lignes (display:inline;)

Answer 3

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

Answer 4

display: block; crée un bloc au niveau de l'élément, alors que display: inline; crée une ligne de niveau élément. C'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 briser le flux d'un document, alors que les éléments en ligne de ne pas.

Quelques exemples d'éléments de niveau bloc comprennent: div, h1, p, et hr balises HTML.

Quelques exemples de inline éléments de niveau comprennent: a, span, strong, em, b, et i balises HTML.

Personnellement, j'aime à penser que les éléments en ligne comme typographiques éléments. Ce n'est pas entièrement ou techniquement correcte, mais pour la plupart des éléments inline ne se comportent un peu comme du texte.

Vous pouvez en lire plus à travers l'article sur le sujet ici. Voyant que plusieurs autres personnes dans ce thread ai déjà cité, il peut être intéressant à lire.

Answer 5

Display : block prendra toute la ligne, je.e sans saut de ligne

Display :inline prendra seulement exactement l'espace qu'il nécessite.

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

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

Vous pouvez vous référer exemple en ce violon http://jsfiddle.net/RJXZM/1/.