作者look ()
看板Web_Design
标题Re: [问题] 文字栏位与图片无法对齐
时间Mon Nov 14 02:05:29 2005
※ 引述《chweng ()》之铭言：
: margin 跟 padding 不一样喔，
: 简单来说前者是外边距(边界)；後者是内边距(补白)。
: 你可以分别在同样的 div 上加上框线 border: 3px solid #00f;
: 最好再给它上个底色 background: #f00;
: 然後分别设 margin 和 padding 看看，请看例子：
: http://www.chweng.idv.tw/test/test.php
: 如果你都没指定颜色，两个看起来确实很像，
: 但上了边界和背景色後，很容易就看出差异了。
试试看以下这段 在IE与FIREFOX是不一样的 因为padding的关系(用黄色标起的地方)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>test</title>
<style type="text/css">
body{
font-family : 新细明体 , Times ,serif ;
font-size:15px;
line-height : 1.5 em;
margin:0px;
background-color:#5A87F0;
}
div{
text-align:left;
position:relative;
float:left;
}
#all{
width:780px;
float:none;
position:relative;
}
#rightside,
#leftside{
height:440px;
overflow:hidden;
}
#rightside {
width:160px;
background-color:#009600;
}
#leftside{
width:140px;
background-color:#E1E1B4;
border-left:0px;
}
#contents{
padding:50px;
margin:0px;
width:480px;
height:440px;
overflow:auto;
background-color:#FFFFFF;
}
</style>
</head>
<body><center>
<div id="all">
<div id="contents">中间
</div>
<div id="rightside">
右边
</div>
<div id="leftside">
左边
</div>
</div>
</center></body>
</html>
: 另外 margin 和 padding 等等的定义值，是可以做适当的缩写的，详见这里：
: http://www.chweng.idv.tw/w3cguide/csstips.php
: 最後提供一个小技巧，当网页排版有问题的时候，
: 暂时给有问题的 div 上个色，有些时候可以很容易地找出问题所在喔。
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 218.160.88.229
1F：推 member:这是因为他们对 box 的 width 有不同的定义, 参考一下 11/14 07:35
2F：推 look:愿闻其详:) 11/14 08:57