El elemento de bloque siempre comienza una nueva línea. Ocupa el espacio completo horizontal y vertical. El espacio vertical es igual a la altura del texto. Tenemos muchos elementos de bloque disponibles en CSS como "

"," ","

","
","
• ". Todos los encabezados son ejemplos del elemento de bloque. Ocupan el mayor espacio posible y ocupan espacio por defecto. Cuando estamos usando la etiqueta de párrafo cada vez que hay un

  etiqueta, comienza una nueva línea para este párrafo. Lo mismo es el caso de todos los elementos del bloque.

  En esta guía, utilizaremos todos estos elementos de bloque en nuestros códigos y los explicaremos en detalle. También demostraremos algunos ejemplos en esta guía.

  Ejemplo 1

  Para usar estos elementos de bloque en nuestro código HTML, debemos crear un archivo HTML. Para esto, tenemos que abrir el código de Visual Studio, abrir un archivo nuevo, seleccionar el idioma como HTML y comenzar a codificar en este archivo. En esta guía, proporcionaremos una demostración de estos ejemplos utilizando el software de código de Visual Studio. Entonces, escribimos el código HTML y lo guardamos. La extensión del archivo para usar aquí es el ".html ".

  En este ejemplo, usamos los dos elementos de bloque "

  " y "". Creamos dos párrafos y dos elementos "div" en el archivo HTML. Establecimos los nombres de los párrafos como "Element1" y "Element2". También establecemos los nombres de la clase "Div" en "D1" y "D2". Usaremos estos nombres en el código CSS. La primera "

  "Ocupa la línea horizontal completa, mientras que el siguiente" "comienza desde la nueva línea. Aplicamos algunos estilo a estos elementos de bloque utilizando las propiedades CSS.

  Código CSS:

  El siguiente código es el código CSS que estamos utilizando para el estilo de los elementos de bloque anteriores. Usamos las diferentes propiedades de estilo aquí.

  Usamos el nombre del primer párrafo que es "Element1" y lo escribimos como "P.elemento1 ". Luego, aplicamos las propiedades de estilo para este párrafo. Mientras usamos el "borde" para aplicar el borde alrededor del párrafo, verá que este borde se representa en la línea completa. Aquí, el "3px" define el ancho del borde, "sólido" define el tipo de borde y "naranja" es establecer el color del borde del párrafo. La "familia de fuentes" del párrafo está establecido en "argelino". Y el estilo de esta fuente es "cursiva". El tamaño de fuente está configurado en "25px".

  Usamos las mismas propiedades y los mismos valores para el segundo párrafo. Aplicamos estas propiedades en "div". Primero, establecemos el nombre del div a "Div.d1 ”y luego aplique las propiedades aquí. También creamos la frontera alrededor de las clases de div. Para div, tenemos un borde "punteado" de "4px" en color "rojo". La "familia de fuentes" de esta "div" es "Times New Roman". También alineamos el texto del "div" en el "centro". Establecimos su "tamaño de fuente" en "30px". Todas estas propiedades que usamos en el "D1" también se usan en el "D2". Entonces, el estilo de ambas clases div es el mismo.

  Producción:

  Ambos párrafos en esta salida parecen ser los mismos. Puede notar que la frontera ocupa la línea completa, mientras que el siguiente párrafo y div comienza desde la nueva línea. Ambos elementos div son del mismo estilo y aparecen en una línea separada. El borde de ambos div también ocupa el espacio horizontal completo. Entonces, ambos párrafos son elementos de bloque.

  Ejemplo #2

  En el ejemplo 2, tenemos dos párrafos y dos elementos Div nuevamente. Pero aquí, los nombres de los párrafos son "E1" y "E2". Y los nombres de los elementos Div son "Div1" y "Div2".

  Código CSS:

  El fondo del párrafo es "naranja". La "familia de fuentes" que usamos aquí es "Cambria" con un tamaño de "30px". El color de su texto es "verde". Utilizamos las propiedades y valores de estas propiedades para el párrafo 2. Después de esto, diseñamos el "div". Para el DIV, usamos una "fantasía"-familia y el "color de fondo" del div está establecido en "rosa". El tamaño del texto se establece como "tamaño de fuente: 32px". Su color está establecido en "azul". Para el segundo div, se utilizan los valores de las propiedades que establecemos para Div 1.

  Producción:

  Aquí, los colores de fondo para los párrafos y los elementos Div muestran que estos son elementos de bloque. El color de fondo se aplica a la línea horizontal completa y al espacio vertical.

  Ejemplo #3

  Usamos los elementos de bloque aquí. Creamos dos encabezados diferentes llamados "

  " y "

  ", Y dos párrafos diferentes llamados" A1 "y" A2 ". Después de esto, tenemos una "" clase. Dentro de esta clase "", usamos el "

  " y "
  • "Para crear la lista. Todos estos elementos son elementos de bloque.

    Código CSS:

    Establecimos el borde del "div" en "2px" que describe su ancho. El tipo de borde se establece en "sólido". Y el color del borde está establecido en "púrpura". El "H1" está alineado en el "Centro". La "familia de fuentes" que usamos para los encabezados es "argelino". El "color" describe el color de la fuente que se establece en "azul". Para el segundo encabezado, usamos la "orquídea" como el color del texto. A continuación, tenemos el "Li" que representa la lista de elementos. La "familia de fuentes" de esta lista es "Arial" y establecido en "18px" en tamaño. El color del texto de la lista se establece en "verde". Después de esto, aplicamos el estilo a los párrafos, en los que usamos el "Times New Roman" como la "Familia de fuentes". El "19px" es el "tamaño de fuente" y el "color" del texto está establecido en "naranja-rojo". Las mismas propiedades se aplican al segundo párrafo.

    Producción:

    Ejemplo #4

    Aquí, tenemos el "" de la "List1". Dentro de este "", estamos creando el "

    ","

    ", y "

  • ", Y luego cierre este primero" ". Después de esto, creamos otro "", otro "

    ", y otro "

    "Con el nombre" P2 "y un"

  • ". De nuevo, dentro del segundo "". Todos estos elementos que usamos aquí son los elementos de bloque.

    Código CSS:

    El "color de fondo" del DIV está establecido en "Light-Green". El borde está configurado como "verde" y "sólido" con un ancho de "4px". El "H3" se establece como "cursiva". Para este encabezado, establecemos la "familia de fuentes" en "Times New Roman". El "color" del "H3" es "azul". Ahora, tenemos que aplicar el estilo en el "Li" que se usa para la lista. La "familia de fuentes" de la lista es "sans-serif", tiene un tamaño de "20px" y "granate" de color. Utilizamos el mismo "estilo de fuente" para ambos encabezados, que es "argelino" y alineamos ambos encabezados con el "centro". El "color de fondo" del otro "div" es "rosa de luz". El borde exterior es "magenta" y es "4px" de ancho.

    Producción:

    Aquí, puede ver que el color de fondo que utilizamos para el DIV también se aplica al párrafo, el encabezado y la lista desde que escribimos todos estos elementos dentro del "Div". El color de fondo y el borde se aplican a todos los elementos. También puede notar que cada párrafo, encabezado y lista de elementos aparecen en la nueva línea, mientras que cada elemento ocupa el espacio horizontal y vertical completo. Entonces, estos son todos los elementos de bloque.

    Conclusión

    En esta guía, discutimos el concepto de elemento de bloque. Aprendimos que los elementos de bloque siempre usan el espacio horizontal y vertical completo, y el siguiente elemento de bloque siempre comienza desde la nueva línea. También aprendimos que ocupan espacio por defecto. Exploramos los cuatro códigos en esta guía, en el que utilizamos las propiedades HTML y CSS.Discutimos estos códigos en detalle en esta guía. También hemos mostrado la salida y explicado los elementos de bloque en detalle. Mencionamos los elementos de bloque y usamos estos elementos de bloque en nuestros códigos.