溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了DIV間距設置的技巧有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇DIV間距設置的技巧有哪些文章都會有所收獲，下面我們一起來看看吧。
DIV之間距離
讓兩個上下結構DIV塊距離為零，通常新手在制作DIV CSS頁面的時候，不會考慮到初始化CSS屬性，這樣各標簽屬性默認的CSS屬性將會造成錯位、兼容等問題。
如上下結構的2個box DIV塊，中間有一定間距無法消除
在CSS里設置DIV標簽各屬性參數為0
div{margin:0;border:0;padding:0;}
這里就設置了DIV標簽CSS屬性相當于初始化了DIV標簽CSS屬性，這里設置margin外邊距為0；邊框border屬性為0和內補白也為0；這樣相當于就初始化了DIV盒子之間距各屬性距離為0，這樣就不會造成DIV直接有一定的距離。
以上是使用CSS清除盒子之間距離。接下來為大家介紹設置盒子之間間距。
使用CSS樣式單詞為margin（可進入CSS margin教程了解詳細使用方法）。
1、設置對象的上下間距
.億速云-a{margin:10px 0}設置“億速云-a”對象上下間距為10px,左右為0
2、設置對象左右距離
.億速云-b{margin:0 8px}設置“億速云-b”對象上下間距為0,左右為8px
3、設置DIV盒子與上方相鄰間距
.億速云-c{margin-top:10px}設置“億速云-c”對象與上方相鄰間距為10px
4、設置DIV盒子與下方相鄰距離
.億速云-d{margin-bottom:10px}設置“億速云-d”對象與下方相鄰間距為10px
5、設置DIV盒子與左方相鄰間距
.億速云-e{margin-left:9px}設置“億速云-e”對象與左側方相鄰間距為9px
6、設置盒子與右方相鄰距離
.億速云-f{margin-right:12px}設置“億速云-f”對象與右方相鄰間距為12px
以上我們為了方便介紹margin設置對象外間距，將對象分別CSS命名為".億速云-a"至“.億速云-f”,實際使用時候更加需求命名。
解決方法與技巧：
一般我們使用float 浮動屬性（float:left（局左）、float:right（居右））來解決此問題。這樣的布局一般總的寬度一定，只需左、右內容DIV寬度設置小于總寬度即可實現，注意的是寬度計算一定是包括自己設置寬度+邊框寬度+padding寬度+margin寬度組成。
提示：在DIV CSS制作中很多時候需要計算的如這樣的布局。
實現以上效果，提示總寬度為200px,而左右布局都有邊框并中間間隔一定距離，這里為了樣式所以距離設置比較大。
CSS代碼：
.div-c{width:200px;} .div-a{ float:left; width:50px; border:1px solid #999; height:60px;} .div-b{ float:right; width:120px; border:1px solid #999; height:60px;}Html代碼：
<div class="div-c"> <div class="div-a"></div> <div class="div-b"></div> </div>
完整DIV+CSS代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIVCSS5案例</title> <!-- www.億速云.com --> <style type="text/css"> .div-c{width:200px;} .div-a{ float:left; width:50px; border:1px solid #999; height:60px;} .div-b{ float:right; width:120px; border:1px solid #999; height:60px;} </style> </head> <body> <div class="div-c"> <div class="div-a"></div> <div class="div-b"></div> </div> </body> </html>說明：
1、實現設置總寬度為200px的(div-c)，左右DIV使用了float:left左浮動（局左）和float:right右浮動（局右），分別設置邊框和寬度
2、這里設置左右DIV塊(即div-a和div-b)總寬度+邊框小于總寬度(即div-c對象寬度)
關于“DIV間距設置的技巧有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“DIV間距設置的技巧有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
