;块级元素中的标签。代码是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.
