作者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