61,112
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
Hozaka 2005-04-05
- 打赏
- 举报
padding 是元素内补白，margin 是元素外边距
比如定义 span {padding: 10px; background-color: red;} 那么 <span>abc</span> 看到的是一个红色块，而且不是紧贴 abc 的。
但是如果定义 span {margin: 10px; background-color: red;} ，那么 <span>abc</span> 的红色块边缘紧贴 abc 字符，但是周围有 10 个像素的边界
比如定义 span {padding: 10px; background-color: red;} 那么 <span>abc</span> 看到的是一个红色块，而且不是紧贴 abc 的。
但是如果定义 span {margin: 10px; background-color: red;} ，那么 <span>abc</span> 的红色块边缘紧贴 abc 字符，但是周围有 10 个像素的边界
潜水的鱼 2005-04-04
- 打赏
- 举报
在不同的声明下, 同样的值会有不同的效果;
JK_10000 2005-04-04
- 打赏
- 举报
用frontpage把以下代码显示出来就知道了：
<body>
整个box如下：
<div style="background-color:cccccc;width:500;height:500;" align=center>margin
<div style="background-color:red;width:400;height:400;">border
<div style="background-color:white;width:300;height:300;">padding
<div style="background-color:cccccc;width:200;height:200;">对象本身
</div>
</div>
</div>
</div>
</body>
<body>
整个box如下：
<div style="background-color:cccccc;width:500;height:500;" align=center>margin
<div style="background-color:red;width:400;height:400;">border
<div style="background-color:white;width:300;height:300;">padding
<div style="background-color:cccccc;width:200;height:200;">对象本身
</div>
</div>
</div>
</div>
</body>
zhiin1 2005-04-03
- 打赏
- 举报
select { margin:0px }
QB2000 2005-04-02
- 打赏
- 举报
<style>
body{padding:0}#idParentDiv{width:100%;padding:6px;background-color:buttonshadow;mar
gin:'0';padding:'0';border:2px solid #ff0000}
#idDiv1{color:#FFFFFF;padding:4px;clear:none;}
#idDiv2{width:150px;height:40px;background-color:#FF6633;color:#FFFFFF;padding:4px;floa
t:none;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px
0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<script>
function rdl_change(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv1=document.all("idDiv1");
var oDiv2=document.all("idDiv2");
with (document.all("idSel1")){
if (selectedIndex!=0) var sValue1=options[selectedIndex].value;
else var sValue1="none"
}
with (document.all("idSel2")){
if (selectedIndex!=0) var sValue2=options[selectedIndex].value;
else var sValue2="none"
}
oDiv1.style.clear=sValue1;
oDiv2.style.styleFloat=sValue2;
oCodeDiv.innerHTML="#idDiv1 { clear : "+sValue1+" ; }"+"<br>"+"#idDiv2 { float :
"+sValue2+" ; }";
}
</script>
<body style="border:1px solid #ff0000;">
<div id=idParentDiv>
<div id=idDiv2>我的ID是<b> idDiv2 </b>。请选择我的<b> float </b>属性的值。</div>
<div id=idDiv1>我的ID是<b> idDiv1 </b>。请从下方的第一个选择框内选择我的<b> clear </b>属
性的值。从第二个选择框内选择<b> idDiv2 </b>的<b> float </b>属性的值。</div>
</div>
<br>
<table><tr><td>
<select id="idSel1" onchange="rdl_change();">
<option value="null" style="font-weight:bold;">---clear---
<option value="none">none
<option value="left">left
<option value="right">right
<option value="both">both
</select>
</td><td>
<select id="idSel2" onchange="rdl_change();">
<option value="null" style="font-weight:bold;">---float---
<option value="none">none
<option value="left">left
<option value="right">right
</select>
</td></tr></table>
<div id=idCodeDiv>#idDiv1 { clear : none ; }<br>#idDiv2 { float : none ; }</div>
</body>
按书上的理解,我只要把padding设为0,就应该没有间隙,可实际上却有..
body{padding:0}#idParentDiv{width:100%;padding:6px;background-color:buttonshadow;mar
gin:'0';padding:'0';border:2px solid #ff0000}
#idDiv1{color:#FFFFFF;padding:4px;clear:none;}
#idDiv2{width:150px;height:40px;background-color:#FF6633;color:#FFFFFF;padding:4px;floa
t:none;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px
0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<script>
function rdl_change(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv1=document.all("idDiv1");
var oDiv2=document.all("idDiv2");
with (document.all("idSel1")){
if (selectedIndex!=0) var sValue1=options[selectedIndex].value;
else var sValue1="none"
}
with (document.all("idSel2")){
if (selectedIndex!=0) var sValue2=options[selectedIndex].value;
else var sValue2="none"
}
oDiv1.style.clear=sValue1;
oDiv2.style.styleFloat=sValue2;
oCodeDiv.innerHTML="#idDiv1 { clear : "+sValue1+" ; }"+"<br>"+"#idDiv2 { float :
"+sValue2+" ; }";
}
</script>
<body style="border:1px solid #ff0000;">
<div id=idParentDiv>
<div id=idDiv2>我的ID是<b> idDiv2 </b>。请选择我的<b> float </b>属性的值。</div>
<div id=idDiv1>我的ID是<b> idDiv1 </b>。请从下方的第一个选择框内选择我的<b> clear </b>属
性的值。从第二个选择框内选择<b> idDiv2 </b>的<b> float </b>属性的值。</div>
</div>
<br>
<table><tr><td>
<select id="idSel1" onchange="rdl_change();">
<option value="null" style="font-weight:bold;">---clear---
<option value="none">none
<option value="left">left
<option value="right">right
<option value="both">both
</select>
</td><td>
<select id="idSel2" onchange="rdl_change();">
<option value="null" style="font-weight:bold;">---float---
<option value="none">none
<option value="left">left
<option value="right">right
</select>
</td></tr></table>
<div id=idCodeDiv>#idDiv1 { clear : none ; }<br>#idDiv2 { float : none ; }</div>
</body>
按书上的理解,我只要把padding设为0,就应该没有间隙,可实际上却有..
micker 2005-04-02
- 打赏
- 举报
一个是内，一个是外！
TSD 2005-04-02
- 打赏
- 举报
padding - 间距
margin - 边距
margin - 边距
