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。
 
语法:

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.

【编辑推荐】

  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-25 08:57:33

marginpadding

2010-08-24 08:56:22

CSSpadding

2010-08-25 13:33:55

CSSpadding

2010-08-23 08:45:08

CSSpadding内边距

2010-08-23 15:33:47

CSSpadding

2010-08-23 13:05:16

padding-lef

2010-08-23 09:01:45

MarginPadding

2010-08-19 11:32:10

CSSpaddingmargin

2010-08-23 15:51:54

paddingmargin

2010-08-30 11:34:32

csspadding

2010-08-20 14:58:26

CSSpadding

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技术栈公众号