padding与margin含义实例演示

2010-5-17 - diyidu - css应用 - Views

今天又有人问我怎么区别padding与margin这两个属性了。不可否认，许多学html的同学都被这个问题困扰过，但其实说白了，padding就是内容与边框之间的空隙；而margin则是模块与模块之间的空隙。这么说不知道你是否能明白？不着急，低一度花了点时间，写了两个实例代码供大家演示，帮助大伙儿理解其各自含义。一起来瞧瞧！单击“运行代码”可查看演示页面，并进行相关操作——

1.padding

<style>
#idParentDiv{width:50%;height:120px;padding:6px;background-color:#999999;}
#idDiv{width:400px;height:80px;background-color:#FFFFFF;padding:6px;color:#0000FF;}
#idCodeDiv{width:50%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#999999;font-weight:bold;}
</style>

<script>
var iValue=6;
function rdl_doAdd(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
var oNum=document.all("idNum");
iValue+=1;
oNum.value=oDiv.style.padding=iValue.toString()+"px";
oCodeDiv.innerText="padding : "+oNum.value+" ; ";
}
function rdl_doDvv(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
var oNum=document.all("idNum");
iValue-=1;
oNum.value=oDiv.style.padding=iValue.toString()+"px";
oCodeDiv.innerText="padding : "+oNum.value+" ; ";
}
</script>

<div id=idParentDiv>
<div id=idDiv>请单击下方的“+”“-”按钮变换padding的值。</div>
</div>
<br>
<table><tr><td>
<input id=idNum type=text value="6px" size=19 readonly>
</td><td>
<input type=button onclick="rdl_doAdd();" value=" + " id=idBtn1>
</td><td>
<input type=button onclick="rdl_doDvv();" value=" - " id=idBtn2>
</td></tr></table>
<div id=idCodeDiv>padding : 6px ; </div>

提示：您可以先修改部分代码再运行

2.margin

<style>
#idParentDiv{width:50%;height:120px;padding:6px;background-color:#999999;}
#idDiv{width:400px;height:80px;background-color:#FFFFFF;padding:6px;color:#0000FF;}
#idCodeDiv{width:50%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#999999;font-weight:bold;}
</style>

<script>
var iValue=0;
function rdl_doAdd(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
var oNum=document.all("idNum");
iValue+=1;
oNum.value=oDiv.style.margin=iValue.toString()+"px";
oCodeDiv.innerText="margin : "+oNum.value+" ; ";
}
function rdl_doDvv(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
var oNum=document.all("idNum");
iValue-=1;
oNum.value=oDiv.style.margin=iValue.toString()+"px";
oCodeDiv.innerText="margin : "+oNum.value+" ; ";
}
</script>

<div id=idParentDiv>
<div id=idDiv>请单击下方的“+”“-”按钮变换margin的值。</div>
</div>
<br>
<table><tr><td>
<input id=idNum type=text value="0px" size=19 readonly>
</td><td>
<input type=button onclick="rdl_doAdd();" value=" + " id=idBtn1>
</td><td>
<input type=button onclick="rdl_doDvv();" value=" - " id=idBtn2>
</td></tr></table>
<div id=idCodeDiv>margin : 0px ; </div>

提示：您可以先修改部分代码再运行

关键词 // padding margin css实例 css教程 css
出处：低一度，链接：http://www.diyidu.cn/post/padding_margin.html

上一篇：闲来瞎折腾，几个在线工具分享下一篇：Owen Briggs的CSS布局16例

随机推荐

to "padding与margin含义实例演示"

#1 lfc 回复该留言 2010-5-17 14:14:23

这个还是搞得清的。
diyidu 于 2010-5-17 14:15:57 回复
熟悉样式表的话，基本能搞清，单纯学HTML，对CSS一知半解的同学就不一定了。

#2 李超回复该留言 2010-5-17 14:39:11

老早就把这个给整明白了！
diyidu 于 2010-5-17 16:00:57 回复
呵呵，那就好啊！

#3 猪八戒回复该留言 2010-5-17 17:53:09

真是高手啊。。
diyidu 于 2010-5-17 18:03:44 回复
呵呵，还行吧，不过是早接触了点。

#4 晓潘回复该留言 2010-5-17 18:04:17

这能明白了，padding是文章内容与边框之间的距离，可以书写出“padding 1px 2px 3px 4px;”分别是上右下左顺序；margin是模块与模块之间的距离，书写的顺序也可以和前面的padding书写方法一样，顺序也是一样的，也是上右下左。如果简短书写，可以写成“padding 1px 2px;”顺序就是“上下右左”还可以使用auto，对吧？桶哥，嘿嘿。
diyidu 于 2010-5-17 18:44:32 回复
没错哦，吸收得挺快的。

#5 滔滔乐回复该留言 2010-5-17 18:28:55

严重关注下！
diyidu 于 2010-5-17 18:44:54 回复
多谢。。

#6 吉光片羽回复该留言 2010-5-17 19:51:34

还可以这样玩，有意思，辛苦啦！
diyidu 于 2010-5-17 20:44:16 回复
呵呵，瞎折腾的。

#7 elis 回复该留言 2010-5-17 20:37:37

呵呵，这个还真是挺新鲜的！
diyidu 于 2010-5-17 20:44:44 回复
没见过吗？呵呵。

#8 于泽鹏回复该留言 2010-5-17 21:35:07

感觉不一样，第一个谷歌浏览器里很好，鉴定完毕！
diyidu 于 2010-5-17 23:33:21 回复
呵呵，多谢鉴定哦。

#9 星空有你回复该留言 2010-5-17 22:09:37

感觉一个是放大，一个在漂移～～
diyidu 于 2010-5-17 23:32:46 回复
不对，其实两个都是飘移，第一个是内容在飘，第二个是整个框在飘。

#10 skyoy 回复该留言 2010-5-18 14:37:43

比较直观说明了哦，但浏览器兼容方面就难了。唉。
diyidu 于 2010-5-18 17:21:02 回复
也不难呀，我找个时间写个教程说明下。

#11 Tony 回复该留言 2010-5-18 18:48:15

学习了！哈。。
diyidu 于 2010-5-18 20:07:46 回复
呵，多批评呵：）

#12 网络蚂蚁回复该留言 2010-5-18 19:39:26

正打算学习html和css+div。我能问下你文章里的两个代码框是怎么做的吗？我之前一直在网上找，就是没找到，没想到在这儿看见了。
diyidu 于 2010-5-18 20:09:18 回复
那是个CODE插件，你可以去官方论坛找下。
PS：其实没有div+css一说，准确地说应该是html+css。
网络蚂蚁于 2010-5-18 22:21:05 回复
哦，见笑了。我试试那个插件！

#13 icecream冰淇淋回复该留言 2010-5-20 8:50:28

极容易混淆，理解又有点困难的两个指令。
diyidu 于 2010-5-20 11:21:30 回复
这两个是比较难把握。

#14 周哥回复该留言 2010-5-20 15:39:51

早说嘛，原来是这样的，我一开始还以为这两个功能是一样的了，原来这样的嘛。学习了。
diyidu 于 2010-5-20 16:32:34 回复
你要是早问，我早就说了：）

#15 痕迹回复该留言 2010-5-20 19:38:12

我记得还是用padding比margin好，好像margin有一些浏览器不行。
diyidu 于 2010-5-20 19:49:42 回复
这个应该没有优劣之分。

#16 快鱼回复该留言 2010-5-20 21:14:48

一个是老虎，一个是猫。
diyidu 于 2010-5-20 21:32:27 回复
这个比喻很别致哦。

#17 老实人博客回复该留言 2010-5-20 22:41:11

这回我彻底的明白了~唉，真是太感谢了。我的天哪，走了多少弯路~
diyidu 于 2010-5-20 23:16:09 回复
不客气啊，我也是因为有人问及才懂得写这个：）

padding与margin含义实例演示

随机推荐

if(17==0){document.write("Have no comment")}else{if(17==1){document.write("1 comment")}else{document.write("17 comments")}}; to "padding与margin含义实例演示"

Add comment

to "padding与margin含义实例演示"