HTML DOM padding 属性的定义和用法

开发 前端
HTML DOM padding 属性的用法你是否了解,这里向大家简单描述一下,padding 属性定义元素边框与元素内容之间的空间。

本文和大家重点讨论一下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。
 
语法:

  1. Object.style.padding=paddingPossible Values  
  2.  

Possible Values

实例

本例改变元素的内边距:

  1. <html> 
  2. <head> 
  3. <style type="text/css"> 
  4. p  
  5. {   
  6. border: thin dotted #FF0000;  
  7. }  
  8. </style> 
  9. <script type="text/javascript"> 
  10. function changePadding()  
  11. {  
  12. document.getElementById("p1").style.padding="2cm";  
  13. }  
  14. </script> 
  15. </head> 
  16. <body> 
  17.  
  18. <input type="button" onclick="changePadding()" 
  19. value="Change padding" /> 
  20.  
  21. <p id="p1">This is a paragraph</p> 
  22.  
  23. </body> 
  24. </html> 
  25.  

【编辑推荐】

  1. CSS padding-left属性的定义和使用
  2. 实例解析CSS padding 属性用法
  3. 解析CSS中padding-left属性用法
  4. CSS教程:详解margin和padding属性应用场合
  5. 实现IE6、IE7、IE8多版本浏览器共存的五种方法

 

责任编辑:佚名 来源: w3school.com.cn
相关推荐

2010-08-23 15:14:10

padding

2010-09-15 14:40:07

HTMLposition属性

2010-08-20 15:12:03

marginPadding

2010-08-24 08:56:22

CSSpadding

2010-08-25 08:57:33

marginpadding

2010-08-25 13:33:55

CSSpadding

2010-08-23 15:33:47

CSSpadding

2010-08-23 08:45:08

CSSpadding内边距

2010-08-23 13:05:16

padding-lef

2010-08-23 09:01:45

MarginPadding

2010-08-30 11:34:32

csspadding

2010-08-20 14:58:26

CSSpadding

2010-08-23 15:51:54

paddingmargin

2010-08-19 11:32:10

CSSpaddingmargin

2010-09-28 10:33:59

HTML DOM Ch

2010-08-19 12:55:55

CSSMarginPadding

2010-08-23 13:40:46

CSSpadding-bot

2010-08-25 09:25:13

CSSmargin

2010-09-15 13:44:01

CSS positio

2010-09-15 16:57:18

CSS display
点赞
收藏

51CTO技术栈公众号