HTML 圖像填充

html 中的 padding 屬性在盒狀結構的最裡面元素的內容周圍提供了空間。 html 中的 margin 屬性在盒狀結構的最外層元素的內容周圍提供了空間。內邊距和邊距周圍的空間稱為邊框。

您可以在下方觀察到內邊距、邊距和邊框之間的差異：

• 由於我們知道所有頁面中的通用樣式，因此我們總是更喜歡 CSS 而不是 HTML。
• 所有常見屬性僅在 CSS 中實作。

圖片填充在 HTML 或 CSS 中如何運作？

• 填充總是在最裡面的部分之間創造空間，無論是圖像還是內容。
• 圖片填充僅由 CSS 中的 img 標籤定義。

語法 1：

img
{
Padding: 10px,10px,10px,10px; //padding positions
}

語法 1 解釋：

如果我們應用 4 個值的填充，則第一個值用於頂部，第二個值用於右側，第三個值用於底部，第四個值用於左側應用。

語法 2：

img
{
Padding: 10px,10px,10px; //padding positions
}

文法解釋：

如果我們應用 3 個值的填充，第一個用於頂部，第二個用於左側和右側，第三個用於底部應用。

語法 3：

img
{
Padding: 10px,10px; //padding positions
}

文法解釋：

如果我們應用兩個值的填充，第一個值用於頂部和底部，第二個值分別用於左側和右側應用。

語法 4：

img
{
Padding: 10px; //padding positions
}

文法解釋：

如果我們僅使用單一值應用填充，則對所有四個邊均等地使用它。

HTML 影像填充範例

下面給出了 HTML 圖像填充的範例：

範例 #1 – 具有 4 個填充值的影像填充

HTML 程式碼：

<title>Image Padding</title>
<link rel="stylesheet" href="ImagePaddingFourSides.css">


<font color="green">
<h2 id="Image-without-Padding">Image without Padding</h2>
</font>
<p>
<img  class="noPadding lazy" src="/static/imghwm/default1.png" data-src="Tulips.jpg" alt="HTML 圖像填充" >
</p>
<font color="green">
<h2 id="Image-with-Padding">Image with Padding</h2>
</font>
<p>
<img  class="padding lazy" src="/static/imghwm/default1.png" data-src="Tulips.jpg" alt="HTML 圖像填充" >
</p>

CSS 代碼：

.noPadding
{
width:400px;
height:400px;
border: 5px solid brown;
}
.padding
{
width:400px;
height:400px;
padding: 50px 50px 50px 50px;
}

輸出：

塗抹填充前：

塗抹填充後：

說明：

• 上面程式碼中第一個影像類別名稱noPadding和第二個影像類別名稱padding已經在HTML程式碼中取了。
• 在CSS程式碼中，noPadding類別沒有填滿5px邊框。無填充不會在影像周圍留出任何空間。它嚴格遵守邊界。您可以在上面的第 1^st 圖片中看到它。
• padding 類別有 padding 50px 和 50px border。由於圖像周圍的填充，我們在邊框上看到了一些空間。您可以在第二張圖片中看到它。

範例 #2 – 具有 3 個填充值的影像填充

HTML 程式碼：

<title>Image Padding</title>
<link rel="stylesheet" href="ImagePaddingThreeSides.css">


<font color="green">
<h2 id="Image-without-Padding">Image without Padding</h2>
</font>
<p>
<img  class="noPadding lazy" src="/static/imghwm/default1.png" data-src="Koala.jpg" alt="HTML 圖像填充" >
</p>
<font color="green">
<h2 id="Image-with-Padding">Image with Padding</h2>
</font>
<p>
<img  class="padding lazy" src="/static/imghwm/default1.png" data-src="Tulips.jpg" alt="HTML 圖像填充" >
</p>

CSS 代碼：

.noPadding
{
width:400px;
height:400px;
border: 5px solid yellow;
}
.padding
{
width:400px;
height:400px;
padding: 50px 20px 50px;
border: 5px solid yellow;
}

輸出：

塗抹填充前：

塗抹填充後：

說明：

• 在上面的程式碼中，第一個圖像類別名稱、noPadding 和第二個圖像類別名稱 padding 已在 HTML 程式碼中取得。
• 在CSS程式碼中，noPadding類別沒有填滿5px邊框。無填充不會在影像周圍留出任何空間。它嚴格遵守邊界。您可以在上面的第 1^st 圖片中看到它。
• padding 類別有 padding 50px、20px、50px 和 5px 邊框。由於影像頂部周圍有 50 像素、左側和右側 20 像素以及底部 50 像素的內邊距。我們從邊界看到了一些空間。您可以在第二張圖片中看到這一點。

範例 #3 – 具有 3 個填充值的影像填充

HTML 程式碼：

<title>Image Padding</title>
<link rel="stylesheet" href="ImagePaddingTwoSides.css">


<font color="green">
<h2 id="Image-without-Padding">Image without Padding</h2>
</font>
<p>
<img  class="noPadding lazy" src="/static/imghwm/default1.png" data-src="Desert.jpg" alt="HTML 圖像填充" >
</p>
<font color="green">
<h2 id="Image-with-Padding">Image with Padding</h2>
</font>
<p>
<img  class="padding lazy" src="/static/imghwm/default1.png" data-src="Desert.jpg" alt="HTML 圖像填充" >
</p>&gt

CSS 代碼：

.noPadding
{
width:400px;
height:400px;
border: 5px solid yellow;
}
.padding
{
width:400px;
height:400px;
padding: 75px 50px;
border: 5px solid yellow;
}

輸出：

塗抹填充前：

塗抹填充後：

說明：

• The first image class name, noPadding, and second image class name padding have been taken in HTML code in the above code.
• In CSS code, the noPadding class has without padding with a 5px border. No padding does not give any space around the image. It strictly sticks to the border. You can see it in the above 1^st  image.
• The padding class has padding 75px 50px and 5px border. Due to this, padding around the image’s top and bottom is 50px, and the left and right are 50px, respectively. We have seen some space from the border. You can see it in the 2^nd image.

Example #4 – Image Padding with a Single Padding Value

HTML Code:

<title>Image Padding</title>
<link rel="stylesheet" href="ImagePaddingSingleSides.css">


<font color="green">
<h2 id="Image-without-Padding">Image without Padding</h2>
</font>
<p>
<img  class="noPadding lazy" src="/static/imghwm/default1.png" data-src="Penguins.jpg" alt="HTML 圖像填充" >
</p>
<font color="green">
<h2 id="Image-with-Padding">Image with Padding</h2>
</font>
<p>
<img  class="padding lazy" src="/static/imghwm/default1.png" data-src="Penguins.jpg" alt="HTML 圖像填充" >
</p>

CSS Code:

.noPadding
{
width:400px;
height:400px;
border: 5px solid blue;
}
.padding
{
width:400px;
height:400px;
padding: 70px;
border: 5px solid blue;
}

Output:

Before applying padding:

After applying padding:

Explanation:

• The first image class name, noPadding, and second image class name padding have been taken in HTML code in the above code.
• In CSS code, the noPadding class has without padding with a 5px border. No padding does not give any space around the image. It strictly sticks to the border. You can see it in the above 1^st image.
• The padding class has a padding of 70 and a 5px border. Due to this, we were padding around the image top, left, right and bottom 70px around, respectively. We have seen some space from the border. You can see it in the 2^nd image.

If we want to apply only particular side padding, then CSS provides predefined properties:

• Padding-left: 10px: apply padding 10px to the left side.
• Padding-right: 10px: apply padding 10px to the right side.
• Padding-top: 10px: apply padding 10px to the top side.
• Padding-bottom: 10px: apply padding 10px bottom side.

Note: To include css file in HTML, use tag.

Conclusion

Image padding gives space around the innermost portion. We can apply with one, two, three, and four values with padding inside the img tag.

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