L'elemento di blocco inizia sempre una nuova riga. Occupa lo spazio orizzontale e verticale completo. Lo spazio verticale è uguale all'altezza del testo. Abbiamo molti elementi a blocchi disponibili in CSS come "

"," ","

","
","
• ". Tutti i titoli sono esempi dell'elemento a blocchi. Occupano più spazio possibile e occupano spazio per impostazione predefinita. Quando utilizziamo il tag paragrafo ogni volta in cui c'è un

  Tag, inizia una nuova riga per questo paragrafo. Lo stesso è il caso di tutti gli elementi di blocco.

  In questa guida, useremo tutti questi elementi di blocco nei nostri codici e li spiegheremo in dettaglio. Dimostreremo anche alcuni esempi in questa guida.

  Esempio 1

  Per utilizzare questi elementi di blocco nel nostro codice HTML, dobbiamo creare un file HTML. Per questo, dobbiamo aprire il codice Visual Studio, aprire un nuovo file, selezionare la lingua come HTML e iniziare la codifica in questo file. In questa guida, forniremo una demo di questi esempi utilizzando il software di codice Visual Studio. Quindi, scriviamo il codice HTML e lo salviamo. L'estensione del file da utilizzare qui è ".HTML ".

  In questo esempio, utilizziamo i due elementi di blocco "

  " E "". Creiamo due paragrafi e due elementi "Div" nel file HTML. Abbiamo impostato i nomi dei paragrafi come "elemento1" e "elemento2". Abbiamo anche impostato i nomi della classe "Div" su "D1" e "D2". Useremo questi nomi nel codice CSS. Il primo "

  "Occupa l'intera linea orizzontale mentre il successivo" "parte dalla nuova linea. Applichiamo un po 'di stile a questi elementi di blocco usando le proprietà CSS.

  Codice CSS:

  Il seguente codice è il codice CSS che stiamo utilizzando per lo stile degli elementi di blocco precedenti. Usiamo le diverse proprietà di stile qui.

  Usiamo il nome del primo paragrafo che è "elemento1" e lo scriviamo come "p.elemento1 ". Quindi, applichiamo le proprietà di styling per questo paragrafo. Mentre usiamo il "bordo" per applicare il bordo attorno al paragrafo, vedrai che questo confine è reso sulla linea completa. Qui, il "3px" definisce la larghezza del bordo, "solido" definisce il tipo di bordo e "arancione" è impostare il colore del bordo del paragrafo. La "famiglia di font" del paragrafo è impostata su "Algerian". E lo stile di questo carattere è "corsivo". La dimensione del carattere è impostata su "25px".

  Usiamo le stesse proprietà e gli stessi valori per il secondo paragrafo. Applichiamo queste proprietà su "Div". Innanzitutto, abbiamo impostato il nome del div su "Div.d1 "e quindi applicare le proprietà qui. Creiamo anche il bordo attorno alle classi DIV. Per Div, abbiamo un bordo "punteggiato" di "4px" in colore "rosso". La "famiglie di carattere" di questo "div" è "Times New Roman". Allineiamo anche il testo del "div" nel "centro". Abbiamo impostato la sua "dimensione del carattere" su "30px". Tutte queste proprietà che abbiamo usato nel "D1" sono utilizzate anche in "D2". Quindi, lo stile di entrambe le classi di div è lo stesso.

  Produzione:

  Entrambi i paragrafi in questo output sembrano essere gli stessi. Potresti notare che il confine occupa l'intera linea mentre il prossimo paragrafo e Div iniziano dalla nuova linea. Entrambi gli elementi Div sono dello stesso stile e appaiono in una linea separata. Il bordo di entrambi i Div occupa anche l'intero spazio orizzontale. Quindi, entrambi i paragrafi sono elementi di blocco.

  Esempio n. 2

  Nell'esempio 2, abbiamo di nuovo due paragrafi e due elementi Div. Ma qui, i nomi dei paragrafi sono "E1" ed "E2". E i nomi degli elementi Div sono "Div1" e "Div2".

  Codice CSS:

  Lo sfondo del paragrafo è "arancione". La "famiglia del carattere" che usiamo qui è "Cambria" con una dimensione di "30px". Il colore del suo testo è "verde". Usiamo le proprietà e i valori di queste proprietà per il paragrafo 2. Dopo questo, modelliamo il "div". Per il Div, utilizziamo una famiglia di carattere "fantasy" e il "colore di sfondo" del Div è impostato su "rosa". La dimensione del testo è impostata come "Font-Size: 32px". Il suo colore è impostato su "blu". Per il secondo div, vengono utilizzati i valori delle proprietà che abbiamo impostato per Div 1.

  Produzione:

  Qui, i colori di sfondo per i paragrafi e gli elementi div mostrano che si tratta di elementi a blocchi. Il colore di sfondo viene applicato alla linea orizzontale completa e allo spazio verticale.

  Esempio n. 3

  Usiamo gli elementi di blocco qui. Creiamo due diversi titoli chiamati "

  " E "

  ", E due diversi paragrafi chiamati" A1 "e" A2 ". Dopo questo, abbiamo una classe "". All'interno di questa classe "", usiamo il "

  " E "
  • "Per creare l'elenco. Tutti questi elementi sono elementi di blocco.

    Codice CSS:

    Abbiamo impostato il bordo del "div" su "2px" che descrive la sua larghezza. Il tipo di bordo è impostato su "solido". E il colore del bordo è impostato su "viola". "H1" è allineato nel "centro". La "famiglia del carattere" che utilizziamo per le intestazioni è "algerina". Il "colore" descrive il colore del carattere che è impostato su "blu". Per la seconda intestazione, usiamo l '"orchidea" come colore del testo. Successivamente, abbiamo il "Li" che rappresenta l'elenco degli elementi. La "famiglia di carattere" di questo elenco è "Arial" e impostata su "18px" di dimensioni. Il colore del testo dell'elenco è impostato su "verde". Dopo questo, applichiamo lo stile ai paragrafi, in cui usiamo il "Times New Roman" come "Font-Family". Il "19px" è la "dimensione del carattere" e il "colore" del testo è impostato su "rosso arancione". Tutte le stesse proprietà vengono applicate al secondo paragrafo.

    Produzione:

    Esempio #4

    Qui, abbiamo il "" di "List1". All'interno di questo "", stiamo creando "

    ","

    ", E "

  • ", E poi chiudi questo primo" ". Dopo questo, creiamo un altro "", un altro "

    ", e un altro "

    "Con il nome" p2 "e un"

  • ". Ancora una volta, all'interno del secondo "". Tutti questi elementi che utilizziamo qui sono gli elementi di blocco.

    Codice CSS:

    Il "colore di sfondo" del div è impostato su "verde chiaro". Il bordo è impostato su "verde" e "solido" con una larghezza "4px". "H3" è impostato come "corsivo". Per questa intestazione, abbiamo impostato la "famiglie di carattere" su "Times New Roman". Il "colore" di "H3" è "blu". Ora, dobbiamo applicare lo stile su "Li" che viene utilizzato per l'elenco. La "famiglie di carattere" dell'elenco è "sans-serif", è di dimensioni "20px" e "marrone". Usiamo lo stesso "tipo di carattere" per entrambe le intestazioni che è "algerino" e allineano entrambi i titoli al "centro". Il "colore di sfondo" dell'altro "div" è "rosa leggera". Il bordo esterno è "magenta" ed è "4px" di larghezza.

    Produzione:

    Qui, puoi vedere che anche il colore di sfondo che abbiamo usato per il Div viene applicato al paragrafo, alla direzione e all'elenco da quando abbiamo scritto tutti questi elementi all'interno del "Div". Il colore di sfondo e il bordo sono applicati a tutti gli elementi. Puoi anche notare che ogni paragrafo, intestazione e elenco di elementi compaiono nella nuova riga mentre ogni elemento occupa lo spazio orizzontale e verticale completo. Quindi, questi sono tutti elementi di blocco.

    Conclusione

    In questa guida, abbiamo discusso del concetto di elemento di blocco. Abbiamo appreso che gli elementi a blocchi usano sempre lo spazio orizzontale e verticale completo e l'elemento di blocco successivo inizia sempre dalla nuova linea. Abbiamo anche appreso che occupano lo spazio per impostazione predefinita. Abbiamo esplorato i quattro codici in questa guida, in cui abbiamo usato le proprietà HTML e CSS.Abbiamo discusso in dettaglio questi codici in questa guida. Abbiamo anche mostrato l'output e spiegato in dettaglio gli elementi del blocco. Abbiamo menzionato gli elementi di blocco e usato questi elementi di blocco nei nostri codici.