HTML 填入

PHPz原創: 2024-09-04 16:50:10962瀏覽

一般來說，Padding 是指任何事物之間的空間，就像 HTML 中指的是 HTML 內容與其邊框之間的空間一樣。 HTML 填滿也是讓網頁更具吸引力並突出顯示網站的屬性。它還有一些類型，如 padding-top、padding-left、padding-right、padding-bottom 等。我們可以以類似類型的 padding 格式對齊單字或文字。填入在 HTML 元素內以建立額外的空間，且邊距也為 HTML 元素建立額外的空間。我們也對所有填滿區域使用 CSS 樣式及其屬性。

文法：

每個 HTML 標籤都有其元素的屬性和屬性。同樣，語法也不同，如果使用者要求需要，它們將用於所有其他 HTML 標記。以下是 HTML 中填滿元素的基本語法。

<html>
<head>
<style>
.sample
{
Font-size:1 px;
Background-color:green;
Margin:28px;
Padding:30 px;
}
</style>
</head>
<body>
</body>
</html>

上述語法有助於建立範例網頁，並將在 HTML 的 head 部分使用 CSS 樣式中的填滿樣式。基於此，如果我們在 HTML 的其他部分和標籤中使用它，語法將會有所不同。

填充在 HTML 中如何運作？

與 margin 相比，Padding 是在某些 HTML 元素內部建立的額外空間，但 margin 是在 HTML 元素外部建立的。每個元素，例如 Padding 和 margin，都是指 Padding、margins 和 border 與 HTML 容器的盒子模型組合而成的盒子模型。在這個模型中，如果使用者需要在網頁中進行客製化開發，則用於 HTML 內容（即文字或圖像、影片等）的區域的中間部分會用一些內邊距、邊距和邊框包圍。

我們不會在必要時使用所有這些，但記住盒模型應用於網頁上的每個標籤或元素是有益的。某些 CSS 樣式和屬性允許用屬性數量替換一串值，並且它們用用空格分隔的值表示。

盒子內部邊距和邊框區域以及HTML內容區域之外的Padding，padding屬性，用於指定盒子容器內統一的填充樣式。根據我們在程式碼中的聲明和客戶要求，獨立指定三個或四個值。

計算 Padding 的長度時，需要考慮某些允許的值，確保它們不是負數；另外，計算包含框寬度和高度且不包含負值的百分比。我們可以在 HTML 網頁的圖像端使用 Padding，幫助在圖片和資料流（如 HTML 內容）之間建立緩衝區。它給圖像提供了很小的呼吸空間，因此它們不會卡在文字或其他圖像中。

我們通常會將圖像放置在網頁的左側，並緊密附著資料內容。沒有任何令人分心的接近圖片。儘管如此，當在右側面板中使用相同的圖像時，填充會在圖像和文字之間創建一個緩衝區；從使用者的角度來看，這將有助於獲得愉快的閱讀體驗。我們也可以使用編輯操作（例如具有某些樣式屬性的 HTML 編輯器）在圖像畫布中新增 Padding，並在使用者選擇圖像後切換到富文本編輯器。

我們根據使用者或客戶的指示，在我們選擇或作為圖像內容上傳到網頁的圖像的所有側面添加選擇性填充，例如10 像素邊框；另外，我們可以根據使用者的需求，透過使用一些填充樣式來選擇性地添加填充，例如padding-bottom 選項到padding-right 。

4 個填充值

我們可以在 javascript 函數中使用 Padding，在 HTML 程式碼中呼叫 javascript 函數後自動建立邊框樣式或填滿樣式並調整其大小。通常，padding 屬性設定或傳回 HTML 元素的 Padding，該屬性從單一值到四個值；我們將在下面討論每個填充值。

單一值： 例如 div{padding:12px} - HTML 內容的所有四個邊都將具有類似 12 px 的填滿值。
兩個值： div{padding:12px 13px} - 頂部和底部 Padding 為 12px，左右 padding 為 13px。
三個值： div{padding:12px 13px 14px} - 頂部 Padding 為 10px，左右 Padding 為 13px，底部 Padding 為 14px。
四個值： div{padding:12px 13px 14px 15px} - 頂部 Padding 為 12px，右側 Padding 為 13px，底部 Padding 為 14px，左側 Padding 為 15px。

HTML 填充範例

HTML Padding 的範例如下：

範例#1

代碼：

<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>
</body>
</html>

輸出：

HTML 填入

Example #2

Code:

<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<img src="download.jpg" style="padding:33px;float:left">
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>
</body>
</html>

Output:

HTML 填入

Example #3

Code:

<html>
<head>
<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "2px 3px 4px 5px";
}
</script>
</body>
</html>

Output:

HTML 填入

The first example illustrates the fundamental concept of Padding. In the second example, we incorporate additional images into the web pages using padding styles. The final example is using javascript functions to set or resize the padding styles automatically.

Conclusion

We already discussed some HTML concepts in real-time scenarios, whichever we are using HTML tags in web pages, not only in web mode but also on user compatibility; it will accept the mobile (both android and ios) modes based on user requirements.

以上是HTML 填入的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html String if switch for select using Property number position margin padding border canvas android ios

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML 圖像填充下一篇：HTML 圖像填充

看更多