本文和大家重点讨论一下HTML DOM padding 属性的用法, padding 属性主要用来设置元素的内边距,它定义元素边框与元素内容之间的空间。
HTML DOM padding 属性
定义和用法
padding 属性设置元素的内边距。
padding 属性定义元素边框与元素内容之间的空间。
该属性可采取 4 个值:
如果规定一个值,比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
如果规定两个值,比如 div {padding: 50px 10px} - 上下内边距是 50 px,左右内边距是 10 px。
如果规定三个值,比如 div {padding: 50px 10px 20px} - 上内边距是 50 px,左右内边距是 10 px,下内边距是 20 px。
如果规定四个值,比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px,右内边距是 10 px,下内边距是 20 px,左内边距是 30 px。
语法:
Object.style.padding=paddingPossible Values
- 1.
- 2.
Possible Values
实例
本例改变元素的内边距:
<html>
<head>
<style type="text/css">
p
{
border: thin dotted #FF0000;
}
</style>
<script type="text/javascript">
function changePadding()
{
document.getElementById("p1").style.padding="2cm";
}
</script>
</head>
<body>
<input type="button" onclick="changePadding()"
value="Change padding" />
<p id="p1">This is a paragraph</p>
</body>
</html>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
【编辑推荐】
- CSS padding-left属性的定义和使用
- 实例解析CSS padding 属性用法
- 解析CSS中padding-left属性用法
- CSS教程:详解margin和padding属性应用场合
- 实现IE6、IE7、IE8多版本浏览器共存的五种方法