本文和大家重点讨论一下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
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>
【编辑推荐】
- CSS padding-left属性的定义和使用
- 实例解析CSS padding 属性用法
- 解析CSS中padding-left属性用法
- CSS教程:详解margin和padding属性应用场合
- 实现IE6、IE7、IE8多版本浏览器共存的五种方法