Bloque en línea de CSS
Este blog lo guiará sobre CSS Inline y Block Elements Display. Vamos a empezar!
¿Cuáles son los valores de la propiedad de la pantalla CSS??
A continuación se enumeran tres valores de la propiedad de visualización CSS:
- bloquear: Los elementos de bloque comienzan en una nueva línea y llenan todo el ancho, de izquierda a derecha.
- en línea: Los elementos en línea aparecen en la misma línea.
- bloqueo en línea: El valor de la propiedad en línea bloque es como el valor en línea, pero también proporciona propiedades de margen y acolchado al elemento.
Elabremos a cada uno de ellos a través de un ejemplo uno por uno!
Ejemplo
En el archivo HTML, agregue
elemento para proporcionar contenido al navegador web.
Html
Los mejores tutoriales de CSS
Propiedad de visualización: bloque
El "bloquearLa pantalla lleva el elemento a la nueva línea y ocupa todo el ancho de la página. Si desea cambiar su tamaño, utilice las propiedades de ancho y altura de CSS.
Ahora, en CSS, aplique el "mostrar"Valor de propiedad establecido como"bloquear"Al párrafo agregado y asigne el"borde" como "5px RGB sólido (204, 13, 172)". El borde significará el comportamiento de las propiedades de la pantalla.
CSS
La imagen proporcionada a continuación indica el comportamiento de la propiedad de pantalla de bloque, como hemos descrito anteriormente:
Propiedad de visualización: en línea
El "en línea"La propiedad no lleva el elemento a la siguiente línea, y ninguna de las propiedades de ancho y altura no afectará esta propiedad.
En CSS, ahora asignaremos el "mostrar"Valor de propiedad como"en línea".
CSS
Pantalla: en línea;La imagen dada a continuación indica que el texto está en línea:
Propiedad de visualización: bloque en línea
Este valor funciona igual que el valor de visualización en línea. La diferencia es que esta propiedad de visualización se puede cambiar utilizando propiedades de margen y acolchado. Además, también puede establecer sus valores de ancho y altura de acuerdo con sus preferencias.
CSS
Pantalla: bloque en línea;A continuación se muestra la imagen, que muestra el elemento de bloque en línea sin ninguna propiedad de ancho y altura:
Para ver la clara diferencia entre la pantalla en línea y en línea en línea. Veamos a través de un ejemplo práctico.
Ejemplo: diferencia entre el bloque en línea y en línea
En la sección del Código mencionado a continuación, hemos agregado un párrafo usando
etiqueta. Dentro de este elemento, hemos colocado dos ""Con clase"X"Y clase"Y".
Nota: es, por defecto, un elemento en línea.
Html
CSS- cascading = "x"> estilo = "Y"> Hoja describe cómo se mostrarán los elementos HTML en la pantalla.
En la sección CSS, asignaremos el valor de la propiedad de visualización de la clase X como "en línea"Mientras que la clase Y con el valor"bloqueo en línea". Tenga en cuenta que todas las demás propiedades de estilo se aplican a ambas clases de manera similar.
CSS
En la imagen proporcionada a continuación, puede ver la clara diferencia en ambas clases, la primera está en línea y la segunda se muestra en un bloque en línea:
Lista de algunos elementos HTML en línea, bloque y bloque en línea
Muchos de los elementos HTML son por defecto en línea, bloque o bloque en línea. Algunos de ellos se enumeran a continuación:
Elementos en línea HTML
- durar
- a
- img
Elementos de bloque HTML
- pag
- li
- div
- H1
- sección
Elementos de bloque en línea HTML
- botón
- aporte
- textea
- seleccionar
Hemos discutido el comportamiento de los elementos HTML en línea, bloque y bloque en línea.
Conclusión
La propiedad de visualización de CSS controla el diseño de los elementos. Esta propiedad CSS se puede utilizar con tres valores, en línea, bloque y bloque en línea. Cada valor representa un comportamiento diferente. Más específicamente, el valor de la propiedad en línea de bloque es similar al valor en línea, pero también proporciona propiedades de margen y acolchado al elemento. En este artículo, hemos explicado la propiedad de CSS con ejemplos.