pantalla: en línea vs pantalla: bloque

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

display:inline 

y esto:

 display:block 

Usando estos por separado en un elemento, obtengo el mismo resultado.

display: block significa que el elemento se muestra como un bloque, como siempre han sido los párrafos y los encabezados. 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 statement 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.

Obtenga más información sobre las opciones de visualización: http://www.quirksmode.org/css/display.html

Bloquear

Toma todo el ancho disponible, con una nueva línea antes y después (mostrar: bloquear;)

En línea

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

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

display: inline – sin salto de línea antes o después del elemento

display: block; crea un elemento de nivel de bloque , mientras que display: inline; crea un elemento de nivel en 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 interrumpen 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 tags HTML.

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

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

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

Aquí hay una tabla de comparación enter image description here

Puedes ver ejemplos aquí.

Pantalla: bloque tomará toda la línea, es decir, sin salto de línea

Pantalla: en línea solo ocupará el espacio exacto que requiera.

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

Puede referir el ejemplo en este violín http://jsfiddle.net/RJXZM/1/ .

locking de pantalla

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

ejemplo de bloque de pantalla

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

mostrar el ejemplo de bloque en línea

es por eso que tenemos div y span

El estilo predeterminado de Div es el bloque de visualización: ocupa todo el ancho de la pantalla

El estilo predeterminado de span es display: bloque en línea: span no se inicia en una nueva línea y solo ocupa tanto ancho como sea necesario.

los elementos de bloque se expanden para llenar a sus padres.

los elementos en línea se contraen para ser lo suficientemente grandes como para sostener a sus hijos.

Agregue un color de fondo al elemento y verá muy bien la diferencia entre el bloque en línea y el bloque, como lo explican los otros carteles.

Pantalla: bloque Se comporta en gran medida de la misma manera que las tags ‘p’ y ocupa toda la fila y no puede haber ningún elemento junto a ella hasta que esté flotando. Pantalla: en línea Simplemente usa tanto espacio como se requiere y permite que otros elementos se alineen a su lado.

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

un bloque o bloque en línea puede tener un ancho (por ejemplo, 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 (por 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; } 

Elementos de bloque : los elementos que les gustan div, p, los encabezados son 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 línea. Nunca comienzan desde una nueva línea y ocupan ancho de contenido.