轉自：https://www.thinkcss.com/shili/1372.shtml
div對象盒子向右偏移設置，使用css讓div靠右一定距離-div向右移教程實例篇
div向右偏移一定距離，可采用margin外邊距實現、也可以使用padding來實現，這就要看不同情況下如何靈活選擇了。這里thinkcss為大家介紹各種css布局div向右移方法。
兩個盒子前者是藍色的div，后者是紅色的div,就這種情況下靈活讓紅色div向右浮動偏移一定距離的方法教程分別如下。
基本說明：
為了便於實例，兩個盒子並排，我們將兩個div均設置float浮動樣式，兩個div box同時設置相同寬度和高度。
一、設置margin-left實現div右移
1、有邊框或有背景顏色情況下
兩個div均設置float:left布局靠左css樣式，要讓第二個（紅色）div靠右移動一點，通常是對第二個（后者 紅色）div設置margin-left。
2、為設置div靠右移動一點前代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div向右移一定距離實例 www.thinkcss.com</title>
<style>
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{ border:1px solid #F00}
</style>
</head>
<body>
<div class="box-a">第一個（前者）div</div>
<div class="box-b">第二個（后者）div</div>
</body>
</html>
3、截圖
設置div右移前
4、操作設置第二個div左外邊距離樣式
關鍵CSS代碼：
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{ border:1px solid #F00; margin-left:20px}
截圖
設置margin-left實現紅色div右移一定距離
二、使用margin-right讓第二個div靠右產生一定距離
1、使用說明
上一個方法是直接對要右移div設置margin-left自身靠左一定距離，從而實現div自身向右移。
如果使用margin-right就不能對需要向右移div設置，而是對前者（藍色div）設置即可，實現紅色div右移一定距離。
2、CSS代碼：
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F;margin-right:20px}
.box-b{ border:1px solid #F00}
3、截圖：
margin-right實現div盒子右移
利用對藍色div設置margin-right外右邊距，這樣讓紅色自然靠藍色div一定距離，從而實現div右篇移
三、使用padding-left設置div右移一定距離
要對右移div本身設置padding-left，有一個前提條件，這個div沒有邊框和div本身背景與div外背景色沒有區別，這樣借助padding-left內左邊距，實現div沒有右移，內容右移，看上去就像div右移的一樣效果。
1、關鍵CSS代碼
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{padding-left:20px}
2、截圖
技巧實現看似div右移效果
四、總結
div css布局html是非常靈活的技術，不同思路不同方法不同代碼實現相同效果。樂趣也在此，把握以最簡單方法和思路來布局出要的效果。多實踐多思考慢慢會建立靈活布局技巧與思維。
如需轉載，請注明文章出處和來源網址：http://www.thinkcss.com/shili/1372.shtml