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