轉自：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{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{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{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{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