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中文網其他相關文章！
