作者chweng ()
看板Web_Design
标题Re: [问题] 文字栏位与图片无法对齐
时间Mon Nov 14 00:05:29 2005
margin 跟 padding 不一样喔,
简单来说前者是外边距(边界);後者是内边距(补白)。
你可以分别在同样的 div 上加上框线 border: 3px solid #00f;
最好再给它上个底色 background: #f00;
然後分别设 margin 和 padding 看看,请看例子:
http://www.chweng.idv.tw/test/test.php
如果你都没指定颜色,两个看起来确实很像,
但上了边界和背景色後,很容易就看出差异了。
另外 margin 和 padding 等等的定义值,是可以做适当的缩写的,详见这里:
http://www.chweng.idv.tw/w3cguide/csstips.php
最後提供一个小技巧,当网页排版有问题的时候,
暂时给有问题的 div 上个色,有些时候可以很容易地找出问题所在喔。
※ 引述《look ()》之铭言:
: img{
: vertical-align:middle;
: }
: 加一句这个就可以了
: 个人的经验
: firefox解析CSS比较严格 显示的方式跟IE也有少许不同
: 像IE的判断比较宽松,没有定义的会预设没有
: 而firefox必须定义的很清楚
: 写法上要严谨一点
: 像margin跟padding最好不要用
: padding-top:10px;
: 这种写法只适合用在IE
: 上左下右要一起定义,例如
: padding:0px 10px 0px 0px;
: 如果四个数字都一样写一个就可以
: margin:0px;
: 另外我觉得
: padding跟margin在FIREFOX里好像是一样的
: 在排版上会有困难,所以我都设为0px;
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.134.107.22
※ 编辑: chweng 来自: 220.134.107.22 (11/14 00:10)
1F:推 LokiCjn:感谢,学到不少知识了^^ 11/14 02:44