HTML 圖像填充-html教學-PHP中文網

HTML 圖像填充

WBOY

發布： 2024-09-04 16:49:49

原創

1054 人瀏覽過

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

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

HTML 圖像填充

由於我們知道所有頁面中的通用樣式，因此我們總是更喜歡 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 程式碼：

<!DOCTYPE html>
<html>
<head>
<title>Image Padding</title>
<link rel="stylesheet" href="ImagePaddingFourSides.css"></link>
</head>
<body>
<font color="green">
<h2>Image without Padding</h2>
</font>
<p>
<img src="Tulips.jpg" class="noPadding">
</p>
<font color="green">
<h2>Image with Padding</h2>
</font>
<p>
<img src="Tulips.jpg" class="padding">
</p>
</body>
</html>

登入後複製

CSS 代碼：

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

登入後複製

輸出：

塗抹填充前：

HTML 圖像填充

塗抹填充後：

HTML 圖像填充

說明：

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

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

HTML 程式碼：

<!DOCTYPE html>
<html>
<head>
<title>Image Padding</title>
<link rel="stylesheet" href="ImagePaddingThreeSides.css"></link>
</head>
<body>
<font color="green">
<h2>Image without Padding</h2>
</font>
<p>
<img src="Koala.jpg" class="noPadding">
</p>
<font color="green">
<h2>Image with Padding</h2>
</font>
<p>
<img src="Tulips.jpg" class="padding">
</p>
</body>
</html>

登入後複製

CSS 代碼：

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

登入後複製

輸出：

塗抹填充前：

HTML 圖像填充

塗抹填充後：

HTML 圖像填充

說明：

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

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

HTML 程式碼：

<!DOCTYPE html>
<html>
<head>
<title>Image Padding</title>
<link rel="stylesheet" href="ImagePaddingTwoSides.css"></link>
</head>
<body>
<font color="green">
<h2>Image without Padding</h2>
</font>
<p>
<img src="Desert.jpg" class="noPadding">
</p>
<font color="green">
<h2>Image with Padding</h2>
</font>
<p>
<img src="Desert.jpg" class="padding">
</p&gt
</body>
</html>

登入後複製

CSS 代碼：

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

登入後複製

輸出：

塗抹填充前：

HTML 圖像填充

塗抹填充後：

HTML 圖像填充

說明：

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^stimage.
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^ndimage.

Example #4 – Image Padding with a Single Padding Value

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Image Padding</title>
<link rel="stylesheet" href="ImagePaddingSingleSides.css"></link>
</head>
<body>
<font color="green">
<h2>Image without Padding</h2>
</font>
<p>
<img src="Penguins.jpg" class="noPadding">
</p>
<font color="green">
<h2>Image with Padding</h2>
</font>
<p>
<img src="Penguins.jpg" class="padding">
</p>
</body>
</html>

登入後複製

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:

HTML 圖像填充

After applying padding:

HTML 圖像填充

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^stimage.
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^ndimage.

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