📌  相关文章
📜  HTML | DOM 样式 paddingBottom 属性(1)

📅  最后修改于: 2023-12-03 15:01:12.868000             🧑  作者: Mango

HTML | DOM 样式 paddingBottom 属性

介绍

在 HTML 和 DOM 中，paddingBottom 属性用于设置元素的下内边距（padding）的大小。paddingBottom 属性的值可以是一个长度单位如 px、em 等或百分比值。

语法
padding-bottom: length|initial|inherit;
  • length：设置下内边距的长度。可以使用任何长度单位如 px、em、rem 等。
  • initial：把属性设置为默认值。
  • inherit：从父元素继承该属性的值。
示例

下面是一些 paddingBottom 属性的示例：

<!DOCTYPE html>
<html>
<head>
	<title>paddingBottom 示例</title>
	<style>
		.container {
			background-color: #CDCDCD;
			padding: 50px 20px;
			margin-bottom: 20px;
		}
		.box {
			background-color: #FFFFFF;
			border: 1px solid #000000;
			padding-bottom: 30px;
			height: 100px;
			text-align: center;
			font-size: 24px;
			line-height: 100px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">paddingBottom: 30px;</div>
	</div>
	<div class="container">
		<div class="box" style="padding-bottom: 50px;">paddingBottom: 50px;</div>
	</div>
	<div class="container">
		<div class="box" style="padding-bottom: 10%;">paddingBottom: 10%;</div>
	</div>
</body>
</html>

在上面的示例中，我们设置了一个容器（container），并在其中使用了一个盒子（box）。盒子的 paddingBottom 属性分别为 30px、50px 和 10%，这三个盒子的效果都不同。我们在这里使用了行内样式来设置第二个盒子的 paddingBottom 属性，通过这个例子，可以清晰地了解到 paddingBottom 属性的用法和效果。

结论

paddingBottom 属性与其他的 padding 属性一样，可以帮助我们给元素添加内边距，从而使页面更美观。在设置 paddingBottom 属性时，我们可以使用多种长度单位和百分比值来定制自己想要的效果。