display: inline vs display: block

Question

¿Cuál es la diferencia básica entre el siguiente CSS:

display:inline 

y esto:

display:block 

El uso de estos por separado en un elemento, me sale el mismo resultado.

Answer 1

pantalla: bloque significa que el elemento se muestra como un bloque, como párrafos y encabezados siempre han sido. Un bloque tiene algunos espacios en blanco arriba y abajo y no tolera elementos HTML al lado, excepto cuando se ordena de otra manera (por ejemplo, al agregar una declaración de flotación a otro elemento).

pantalla: en línea significa que el elemento se muestra en línea, dentro del bloque actual en la misma línea. Solo cuando está entre dos bloques, el elemento forma un "bloque anónimo", que sin embargo tiene el ancho más pequeño posible.

Leer más acerca de las opciones de visualización: http://www.quirksmode.org/css/display.html

Answer 2

Bloque

ocupa todo el ancho disponible, con una nueva línea antes y después (display: block;)

Inline

Toma el ancho que necesita y no fuerza las líneas nuevas (visualización: en línea;)

Answer 3

display: block - un salto de línea antes y después del elemento

display: inline - ningún salto de línea antes o después del elemento

Answer 4

Añadir un fondo color al elemento y va muy bien ver la diferencia de línea vs. bloquear, como se explica por los otros carteles.

Answer 5

display: block; crea un elemento a nivel de bloque, mientras que display: inline; crea un elemento a nivel de línea. Es un poco difícil explicar la diferencia si no está familiarizado con el modelo de css box, pero basta con decir que los elementos de nivel de bloque dividen el flujo de un documento, mientras que los elementos en línea no lo hacen.

Algunos ejemplos de elementos de nivel de bloque incluyen: div, h1, p y hr etiquetas HTML.

Algunos ejemplos de elementos a nivel de línea incluyen: a, span, strong, em, b, y i etiquetas HTML.

Personalmente, me gusta pensar en elementos en línea como tipográficos elementos. Esto no es enteramente o técnicamente correcto, pero en su mayor parte los elementos en línea se comportan muy parecido al texto.

Puede leer más en el artículo sobre el tema here. Viendo que varias otras personas en este hilo lo han citado, puede valer la pena leerlo.

Answer 6

display: block se llevará a toda la línea es decir sin salto de línea

display: inline tomará sólo espacio exacto que requiere.

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

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

Puede referirse al ejemplo en este violín http://jsfiddle.net/RJXZM/1/.

Answer 7

Pantalla: bloque Se comporta de la misma manera que las etiquetas 'p' y ocupa toda la fila y no puede haber ningún elemento al lado hasta que flota. Pantalla: en línea Solo usa tanto espacio como se requiere y permite que otros elementos se alineen a su lado.

Utilice estas propiedades en caso de formularios y obtendrá una mejor comprensión.

Answer 8

display: block

toma toda la fila (100%) de la pantalla, es siempre 100% del tamaño de la pantalla

display block example

display: inline-block ocupa tanto ancho como sea necesario, puede ser de 1% a 100% del tamaño de pantalla

display inline-block example

es por eso que tenemos div y la duración de

Div estilo predeterminado es bloque de visualización: se necesita todo el ancho de la pantalla

estilo predeterminado palmo es display: block en línea: lapso no se inicia en una nueva línea y solo ocupa tanto ancho como sea necesario

Answer 9

un bloque o bloque en línea puede tener un ancho (por ej. ancho: 400px) mientras que el elemento en línea no se ve afectado por el ancho. el elemento en línea puede abarcar la siguiente línea de texto (ejemplo http://codepen.io/huijing/pen/PNMxXL cambiar el tamaño de la ventana de su navegador para ver eso) mientras que el elemento de bloque no puede.

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

Answer 10

elementos de bloque: Elementos le gusta div, p, encabezados son a nivel de bloque. Comienzan desde una nueva línea y ocupan todo el ancho del elemento principal. Elementos en línea: Elementos como b, i, span, img están en el nivel en línea. Nunca comienzan desde una nueva línea y ocupan ancho de contenido.

Answer 11

bloque elementos se expanden para llenar su elemento primario.

en línea elementos contratan para ser lo suficientemente grande como para sostener a sus hijos.

Answer 12

Aquí es una tabla de comparación

Puede ver examples here.