調整圖片位置? - 部落格

先解釋一下padding跟margin的作用

比方說有個東西原來長這樣
┌─────────┐
│OOO │
└─────────┘

padding的作用在於增加空白

所以當你對他設定padding-left: 10px;的時候會變成這樣：

┌──────────┐
│ OOO │←跟原本的比起來也變寬10px
└──────────┘
↑因為多了10px，導致OOO會往右移動

-------------------------------------------------------

但如果是要移動整個區塊就要改用margin

所以換成margin-left: 10px;的時候就會變成這樣：
　┌─────────┐
　│OOO │←整體區塊的寬度也不會增加
　└─────────┘
↑距離左邊有10px遠

-------------------------------------------------------

也就是說根據你原來的設定

只是讓#links加長了860px，而不是讓整個#links往下移動！

所以已經跟#links融為一體的背景圖當然也就不會跟著動囉～

解決方式是請你先根據測欄中的背景圖高度去更改padding值

再增加margin值讓整個#links往下挪即可

※ 引述《ych1022 (玄米)》之銘言：
: 我的無名
: http://www.wretch.cc/blog/ych1022
: 目前問題是"右側欄位"的"上方圖片"
: 及網頁中的扭蛋機
: 我無法讓他跟右側欄位一起往下移動
: CSS如下
: #links{
: float:right;
: background:url(http://網址) no-repeat left top;
: width:210px;
: overflow:hidden;
: padding:860px 0px 0px 0px;
: }
: 把圖片的 no-repear left top 改成 bottom
: 圖片就不知道跑去哪裡了= =

--