關閉→
當前位置:趣知常識網>遊戲數碼>電腦>div之間的間距怎麼控制

div之間的間距怎麼控制

趣知常識網 人氣:1.14W

DIV之間距離讓兩個上下結構DIV塊距離為零,通常新手在製作DIV CSS頁面的時候,不會考慮到初始化CSS屬性,這樣各標籤屬性預設的CSS屬性將會造成錯位、相容等問題。如上下結構的2個box DIV塊,中間有一定間距無法消除

div之間的間距怎麼控制

操作方法

(01)清除DIV間距解決方法   -   TOP在CSS裡設定DIV標籤各屬性引數為0div{margin:0;border:0;padding:0;這裡就設定了DIV標籤CSS屬性相當於初始化了DIV標籤CSS屬性,這裡設定margin外邊距為0;邊框border屬性為0和內補白也為0;這樣相當於就初始化了DIV盒子之間距各屬性距離為0,這樣就不會造成DIV直接有一定的距離。當然推薦在製作開發DIV CSS的時候最好將網頁CSS屬性、常用網頁標籤初始化一下。

div之間的間距怎麼控制 第2張

(02)設定DIV盒子之間間距   -   TOP以上是使用CSS清除盒子之間距離。接下來為大家介紹設定盒子之間間距。使用CSS樣式單詞為margin(可進入CSS margin教程瞭解詳細使用方法)。1、設定物件的上下間距ss5-a{margin:10px 0}設定“divcss5-a”物件上下間距為10px,左右為02、設定物件左右距離ss5-b{margin:0 8px}設定“divcss5-b”物件上下間距為0,左右為8px3、設定DIV盒子與上方相鄰間距ss5-c{margin-top:10px}設定“divcss5-c”物件與上方相鄰間距為10px4、設定DIV盒子與下方相鄰距離ss5-d{margin-bottom:10px}設定“divcss5-d”物件與下方相鄰間距為10px5、設定DIV盒子與左方相鄰間距ss5-e{margin-left:9px}設定“divcss5-e”物件與左側方相鄰間距為9px6、設定盒子與右方相鄰距離ss5-f{margin-right:12px}設定“divcss5-f”物件與右方相鄰間距為12px以上我們為了方便介紹margin設定物件外間距,將物件分別CSS命名為"ss5-a"至“ss5-f”,實際使用時候更加需求命名。

div之間的間距怎麼控制 第3張

(03)讓左右結構內容之間有一定間距距離   -   TOP解決方法與技巧:一般我們使用float 浮動屬性(float:left(局左)、float:right(居右))來解決此問題。這樣的佈局一般總的寬度一定,只需左、右內容DIV寬度設定小於總寬度即可實現,注意的是寬度計算一定是包括自己設定寬度+邊框寬度+padding寬度+margin寬度組成。提示:在DIV CSS製作中很多時候需要計算的如這樣的佈局。

div之間的間距怎麼控制 第4張

(04)說明:1、實現設定總寬度為200px的(div-c),左右DIV使用了float:left左浮動(局左)和float:right右浮動(局右),分別設定邊框和寬度2、這裡設定左右DIV塊(即div-a和div-b)總寬度+邊框小於總寬度(即div-c物件寬度)

div之間的間距怎麼控制 第5張

(05)總結設定DIV之間距離無論物件之間有一定距離還是沒有距離,我們都需要CSS初始化,並且有距離地方還需要計算寬度,遵循這條死定律 設定寬度之和+邊框(border)+margin+padding小於等於總寬度,不然會造成左右結構佈局錯位、其他比較的錯誤或有差異。

div之間的間距怎麼控制 第6張
TAG標籤:#DIV #間距 #