HTML 圖像填充
Sep 04, 2024 pm 04:49 PM
html 中的 padding 屬性在盒狀結(jié)構(gòu)的最里面元素的內(nèi)容周圍提供了空間。 html 中的 margin 屬性在盒狀結(jié)構(gòu)的最外層元素的內(nèi)容周圍提供了空間。內(nèi)邊距和邊距周圍的空間稱為邊框。??
您可以在下面觀察到內(nèi)邊距、邊距和邊框之間的區(qū)別：
- 由于我們知道所有頁面中的通用樣式，因此我們總是更喜歡 CSS 而不是 HTML。
- 所有常見屬性僅在 CSS 中實現(xiàn)。
圖像填充在 HTML 或 CSS 中如何工作？
- 填充總是在最里面的部分之間創(chuàng)建空間，無論是圖像還是內(nèi)容。
- 圖像填充僅由 CSS 中的 img 標(biāo)簽定義。
語法 1：
img
{
Padding: 10px,10px,10px,10px; //padding positions
}
語法 1 解釋：
如果我們應(yīng)用 4 個值的填充，則第一個值用于頂部，第二個值用于右側(cè)，第三個值用于底部，第四個值用于左側(cè)應(yīng)用。
語法 2：
img
{
Padding: 10px,10px,10px; //padding positions
}
語法解釋：
如果我們應(yīng)用 3 個值的填充，第一個用于頂部，第二個用于左側(cè)和右側(cè)，第三個用于底部應(yīng)用。
語法 3：
img
{
Padding: 10px,10px; //padding positions
}
語法解釋：
如果我們應(yīng)用兩個值的填充，第一個值用于頂部和底部，第二個值分別用于左側(cè)和右側(cè)應(yīng)用。
語法 4：
img
{
Padding: 10px; //padding positions
}
語法解釋：
如果我們僅使用單個值應(yīng)用填充，則對所有四個邊均等地使用它。
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;
}
輸出：
應(yīng)用填充之前：
應(yīng)用填充后：
說明：
- 上面代碼中第一個圖像類名noPadding和第二個圖像類名padding已經(jīng)在HTML代碼中取了。
- 在CSS代碼中，noPadding類沒有填充5px邊框。無填充不會在圖像周圍留出任何空間。它嚴(yán)格遵守邊界。您可以在上面的第 1st 圖片中看到它。
- 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;
}
輸出：
應(yīng)用填充之前：
應(yīng)用填充后：
說明：
- 在上面的代碼中，第一個圖像類名稱、noPadding 和第二個圖像類名稱 padding 已在 HTML 代碼中獲取。
- 在CSS代碼中，noPadding類沒有填充5px邊框。無填充不會在圖像周圍留出任何空間。它嚴(yán)格遵守邊界。您可以在上面的第 1st 圖片中看到它。
- padding 類有 padding 50px、20px、50px 和 5px 邊框。由于圖像頂部周圍有 50 像素、左側(cè)和右側(cè) 20 像素以及底部 50 像素的內(nèi)邊距。我們已經(jīng)從邊界看到了一些空間。您可以在第二張圖片中看到這一點。
示例 #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> </body> </html>
CSS 代碼：
.noPadding
{
width:400px;
height:400px;
border: 5px solid yellow;
}
.padding
{
width:400px;
height:400px;
padding: 75px 50px;
border: 5px solid yellow;
}
輸出：
應(yīng)用填充之前：
應(yīng)用填充后：
說明：
- 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 1st??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 2nd?image.
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:
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 1st?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 2nd?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.
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 圖像填充的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
初學(xué)者的基本HTML標(biāo)簽
Jul 27, 2025 am 03:45 AM
要快速入門HTML，只需掌握幾個基礎(chǔ)標(biāo)簽即可搭建網(wǎng)頁骨架。1.頁面結(jié)構(gòu)必備、和，其中是根元素，包含元信息，是內(nèi)容展示區(qū)域。2.標(biāo)題使用到，級別越高數(shù)字越小，正文用標(biāo)簽分段，避免跳級使用。3.鏈接使用標(biāo)簽并配合href屬性，圖片使用標(biāo)簽并包含src和alt屬性。4.列表分為無序列表和有序列表，每個條目用表示且必須嵌套在列表中。5.初學(xué)者不必強記所有標(biāo)簽，邊寫邊查更高效，掌握結(jié)構(gòu)、文本、鏈接、圖片和列表即可制作基礎(chǔ)網(wǎng)頁。
影子dom概念和HTML集成
Jul 24, 2025 am 01:39 AM
ShadowDOM是Web組件技術(shù)中用于創(chuàng)建隔離DOM子樹的技術(shù)。1.它允許在普通HTML元素上掛載獨立的DOM結(jié)構(gòu)，擁有自己的樣式和行為，不與主文檔互相影響；2.通過JavaScript創(chuàng)建，例如使用attachShadow方法并設(shè)置mode為open；3.結(jié)合HTML使用時具備結(jié)構(gòu)清晰、樣式隔離和內(nèi)容投影（slot）三大特點；4.注意事項包括調(diào)試復(fù)雜、樣式作用域控制、性能開銷及框架兼容性問題?？傊?，ShadowDOM提供了原生封裝能力，適用于構(gòu)建可復(fù)用且不污染全局的UI組件。
您可以在另一個標(biāo)簽中放置一個標(biāo)簽嗎？
Jul 27, 2025 am 04:15 AM
?Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.?Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph
為什么我的圖像未顯示在HTML中？
Jul 28, 2025 am 02:08 AM
圖像未顯示通常因文件路徑錯誤、文件名或擴展名不正確、HTML語法問題或瀏覽器緩存導(dǎo)致。1.確保src路徑與文件實際位置一致，使用正確的相對路徑；2.檢查文件名大小寫及擴展名是否完全匹配，并通過直接輸入URL驗證圖片能否加載；3.核對img標(biāo)簽語法是否正確，確保無多余字符且alt屬性值恰當(dāng)；4.嘗試強制刷新頁面、清除緩存或使用隱身模式排除緩存干擾。按此順序排查可解決大多數(shù)HTML圖片顯示問題。
html'樣式”標(biāo)簽：內(nèi)聯(lián)與內(nèi)部CSS
Jul 26, 2025 am 07:23 AM
樣式放置方式需根據(jù)場景選擇。1.Inline適合單元素臨時修改或JS動態(tài)控制，如按鈕顏色隨操作變化；2.內(nèi)部CSS適合頁面少、結(jié)構(gòu)簡單項目，便于集中管理樣式，如登錄頁基礎(chǔ)樣式設(shè)置；3.優(yōu)先考慮復(fù)用性、維護性及性能，大項目拆分外鏈CSS文件更優(yōu)。
輸入標(biāo)簽中的名稱屬性是什么？
Jul 27, 2025 am 04:14 AM
thenAmeatTributeInAninputTagisusIfe to IndentifyTheInputWhentheFormisSubSted; iservesAsTheKeyInthekey-ValuePairsentTotheserver，wheretheuser'sinputisthevalue.1.whenaformented，
html'鏈接”預(yù)取DNS
Jul 23, 2025 am 02:19 AM
提前解析DNS能加快頁面加載速度，使用HTML的link標(biāo)簽進行DNS預(yù)解析是有效方法；DNSPrefetching是通過提前解析域名，節(jié)省后續(xù)請求時間；適用場景包括第三方字體、廣告統(tǒng)計腳本、資源托管和CDN域名；建議優(yōu)先處理主頁面依賴資源，合理控制數(shù)量在3～5個，并搭配preconnect使用效果更佳。
html'視口”元標(biāo)記用于響應(yīng)式設(shè)計
Jul 23, 2025 am 12:19 AM
viewportmeta標(biāo)簽是移動端適配的基礎(chǔ)，其核心作用是控制網(wǎng)頁在移動設(shè)備上的顯示方式。1.它通過設(shè)置width=device-width讓頁面寬度匹配設(shè)備實際寬度；2.initial-scale=1確保頁面初始縮放比例為1，避免瀏覽器自動縮放導(dǎo)致文字過小或布局錯亂；3.若不設(shè)置viewport，可能出現(xiàn)響應(yīng)式布局失效、媒體查詢無法生效、點擊區(qū)域不準(zhǔn)等問題；4.正確使用建議保持簡潔，僅設(shè)置基本參數(shù)，避免限制用戶縮放以提升可訪問性；5.同時還需結(jié)合媒體查詢、相對單位、圖片適配等手段，才能實現(xiàn)完
