html 中的 padding 属性在盒状结构的最里面元素的内容周围提供了空间。 html 中的 margin 属性在盒状结构的最外层元素的内容周围提供了空间。内边距和边距周围的空间称为边框。
您可以在下面观察到内边距、边距和边框之间的区别:
语法 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 代码:
<!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 代码:
<!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 代码:
<!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; }
输出:
应用填充之前:
应用填充后:
说明:
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:
If we want to apply only particular side padding, then CSS provides predefined properties:
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中文网其他相关文章!