HTML 还有另一种类型的元素，称为内联块元素。它只是由定义的元素调用的每个标签所占据和界定的空间，而不是破坏 HTML 内容流。块级元素的特征主要是我们认为的
基本语法如下：
语法：
<html> <body> <p><span> ---some html codes ---</span> </p> </body> </html>
以上代码是在html中编写内联块元素的基本语法。我们在下面使用了一些预定义的内联块元素集。
以上标签主要是根据用户需求在html中预定义的html内嵌元素；我们将重点关注 html 内联块元素中的标记。我们都知道块级元素总是开始一个新行并占据给定变量的完整宽度，但内联元素不会开始一个新行。此外，与块级元素相比，它需要的宽度更小，但有必要在 html 内联元素中声明宽度。内联元素将在段落元素的内部声明。 元素通常在容器中用作一些文本，并且没有特定的必需属性，但给定的 css 样式、类和 id 在 时是常见的。 element 在文本的某些样式部分与 css 一起使用。
代码：
<html>
<head>
section {
background: green;
box-sizing: border-box;
padding: 150px;
}
div {
box-sizing: border-box;
display: inline-block;
height: 100px;
padding: 54px;
text-align: center;
width: 53%;
}
.green {
background: lightgreen;
}
.black {
background: black;
}
</head>
<body>
<span style="border: 2px lightgreen">
</span>
<section>
<div class="green">Width: 40%</div>
<div class="black">Width: 60%</div>
</section>
</body>
</html>上述代码说明：在上面的代码中，我们设置了两个div标签的宽度；每个都是 50%，显示属性是 inline-block。预期输出会有所不同，因为两个 div 标签的宽度为 50%，因此任何标签值都会更改为 51% 或 49%。尽管如此，这并不是一个好的做法，而且对于 HTML 元素空间来说也不够；它至少需要 50%，因为内联元素尊重 HTML 中两个 div 标签之间的字间距。
We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use
We will discuss the below examples.
Code:
<html> <body> <p>Sample <span style="border:3px green">Welcome</span>To my domain</p> <p>Welcome to My Domain</p> </body> </html>
Output:
Code:
<html>
<head>
<style>
span.first {
display: inline;
width: 150px;
height: 120px;
padding: 8px;
border: 3px blue;
background-color: green;
}
span.second {
display: inline-block;
width: 140px;
height: 110px;
padding: 7px;
border: 3px blue;
background-color: green;
}
span.third {
display: block;
width: 103px;
height: 110px;
padding: 6px;
border: 2px yellow;
background-color: black;
}
</style>
</head>
<body>
<div> Welcome to My Domain
<span class="first">Welcome</span>
<div>
<div> Same Same
<span class="second">Same Same</span>
<div>
<div> Welcome to My Domain
<span class="third">Welcome</span>
<div>
</body>
</html>Output:
Code:
<html>
<head>
<style>
.first {
float:center;
display: inline;
width: 150px;
height: 120px;
padding: 8px;
border: 3px blue;
background-color: green;
}
.1{
clear:center;
}
</style>
</head>
<body>
<div class="first"> <marquee> Welcome to My Domain</marquee>
</div>
</body>
</html>Output:
Explanation of the above code: The first example will discuss the essential inline element called tag that will use for the web page; the second example will use span in the CSS style, and the same will be called in the tag in body sections each of the CSS styles will be defined in each span third example we will use some text values in the box-limit areas in the inline-block element features.
In Conclusion, partly based on the above topics, we have some ideas about inline-block elements in Html. We use both tag elements for their dependencies and features in user areas. However, IE and other browser versions may or may not support some tags.
以上是HTML 内联块的详细内容。更多信息请关注PHP中文网其他相关文章！
