;區塊級元素中的標籤。程式碼是HTML中區塊級元素的通用語法，在需要時我們也會使用上述的預定義標籤；每個標籤都會有獨立且獨立的 HTML 內容。
區塊元素在 HTML 中如何運作？
它將使用 CSS 樣式和格式化模型，並覆蓋內聯和區塊元素。最有可能的是，它會負責格式化區塊元素。格式化區塊元素是 HTML 中區塊級元素之一。每個 CSS 元素看起來都像一個表單；它包含一個盒子，其中包含一些元件，如內容、填充和邊框；這些是 CSS 樣式中的不同元件。
內容： 表示文字、圖片、影片等HTML元素的一般內容
Padding： 表示按格式覆蓋到任何內容中的任何填充，如 padding-top、padding-left、padding-right、padding-bottom 等。這些是屬性。
邊框： 表示 HTML 內容中的任何邊框和填充；我們使用 border-top、border-bottom 等設定邊框
區塊元素想要設定 HTML 文件中的邊距和填滿。因為網頁需要適當的對齊才能讓用戶看起來更有吸引力。在某些情況下，區塊元素部分包含元素外部的邊距；元素內部的填充將圍繞內容。如果您需要元素的背景顏色或圖像，您可以指定它們，它們將顯示在內容和填充區域中。一般來說，邊距區域是透明的並顯示父元素的背景。但是，如果父元素（例如正文部分）尚未指派任何顯示屬性，則會發生異常。在這種情況下，邊距和填滿區域都顯示顏色或影像。邊距是指 HTML 元素外緣之間的距離，包括內容和內邊距。
我們也設定了邊框以突出網頁，包括邊框顏色、樣式、寬度和邊距。我們控制元素周圍邊框的外觀，並可以指定各種邊框類型。 CSS 的 border-style 屬性使用戶能夠設定自己的自訂邊框樣式，指定的值包括 none、solid、double、hidden、dotted、dashed、groove、ridge、inset 和 outset。如果我們將文件與邊框對齊，則不指定任何值表示預設值為無；這表示沒有為您的頁面指派邊框。除了隱藏值外，所有這些邊框樣式都包含在 css1 版本中，隱藏值是在 css2 版本中新增的。
Starting from HTML 4, the div element is a block-level element for designing documents with specified divisions. Div elements lack specific formatting characteristics by default. However, you can still use the deprecated Align attributes in HTML to the center or align content to the right side; it’s a default in deprecated elements in HTML. In
tag was intended to take any format in CSS styles, and div has the options like nested div tags and other elements nested with div elements whatever styles, borders, and alignments we specified it would affect for those nested elements. Some basic codes for div tags with border, background image, and other user-defined format styles.
Code:
div.sample {width:150px;background:#FF0002;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
The above codes are samples to understand the CSS attributes and functionalities implemented with the div tag. We will discuss some basic examples in the below sections.
Examples of HTML Block Elements
Given below are the following examples:
Example #1
Code:
<html>
<head>
<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pineapple</li>
</ul>
</div>
</body>
</html>
Output:
Example #2
Code:
<html>
<head>
<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>
</head>
<body>
<p>Sample <span style = "color:green">green</span>
<span style = "color:black">black</span></p>
</body>
</html>
Output:
Example #3
Code:
<html>
<head>
<style>
.first {
background-color: green;
list-style-type: none;
text-align: center;
margin: 2;
padding: 2;
}
.second {
display: inline-block;
font-size: 30px;
padding: 23px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#home">Home</a></li>
<li><a href="#aboutus">AboutUs</a></li>
<li><a href="#contactus">Contact Us</a></li>
</ul>
</body>
</html>
Output:
In the above example, we see the different scenarios for the block-level elements first two examples, we use and align the menus or tabs or text values in the
and
tags. is used for inline elements, but paragraph tag will use for blocking the text or values which is to be specified in the user-level areas. A final example will be used for the element in HTML for navigating the web pages with some block-level contents. We already discussed the working of block-level elements area; block-level attributes enable the activation of specific CSS properties such as background color, text styles with list options, text alignments, padding and margins, and font styles; these attributes have values specified with the navigation web pages.
Conclusion
In the conclusion part, the HTML block elements will occupy the entire space for its parent elements (containers) to create the blocks. Browsers will generally display the block-level elements with the new line and full width before and after the HTML elements. We can visualize the elements with boxes like a stack.
