溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

DIV間距設(shè)置的技巧有哪些

發(fā)布時(shí)間：2022-03-04 16:57:35 來源：億速云 閱讀：1355 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了DIV間距設(shè)置的技巧有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇DIV間距設(shè)置的技巧有哪些文章都會(huì)有所收獲，下面我們一起來看看吧。

一、消除上下結(jié)構(gòu)距離

DIV之間距離
讓兩個(gè)上下結(jié)構(gòu)DIV塊距離為零，通常新手在制作DIV CSS頁(yè)面的時(shí)候，不會(huì)考慮到初始化CSS屬性，這樣各標(biāo)簽屬性默認(rèn)的CSS屬性將會(huì)造成錯(cuò)位、兼容等問題。
如上下結(jié)構(gòu)的2個(gè)box DIV塊，中間有一定間距無法消除

二、清除DIV間距解決方法 

在CSS里設(shè)置DIV標(biāo)簽各屬性參數(shù)為0
div{margin:0;border:0;padding:0;}
這里就設(shè)置了DIV標(biāo)簽CSS屬性相當(dāng)于初始化了DIV標(biāo)簽CSS屬性，這里設(shè)置margin外邊距為0；邊框border屬性為0和內(nèi)補(bǔ)白也為0；這樣相當(dāng)于就初始化了DIV盒子之間距各屬性距離為0，這樣就不會(huì)造成DIV直接有一定的距離。

三、設(shè)置DIV盒子之間間距

以上是使用CSS清除盒子之間距離。接下來為大家介紹設(shè)置盒子之間間距。

使用CSS樣式單詞為margin（可進(jìn)入CSS margin教程了解詳細(xì)使用方法）。

1、設(shè)置對(duì)象的上下間距

.億速云-a{margin:10px 0}

設(shè)置“億速云-a”對(duì)象上下間距為10px,左右為0

2、設(shè)置對(duì)象左右距離

.億速云-b{margin:0 8px}

設(shè)置“億速云-b”對(duì)象上下間距為0,左右為8px

3、設(shè)置DIV盒子與上方相鄰間距

.億速云-c{margin-top:10px}

設(shè)置“億速云-c”對(duì)象與上方相鄰間距為10px

4、設(shè)置DIV盒子與下方相鄰距離

.億速云-d{margin-bottom:10px}

設(shè)置“億速云-d”對(duì)象與下方相鄰間距為10px

5、設(shè)置DIV盒子與左方相鄰間距

.億速云-e{margin-left:9px}

設(shè)置“億速云-e”對(duì)象與左側(cè)方相鄰間距為9px

6、設(shè)置盒子與右方相鄰距離

.億速云-f{margin-right:12px}

設(shè)置“億速云-f”對(duì)象與右方相鄰間距為12px

以上我們?yōu)榱朔奖憬榻Bmargin設(shè)置對(duì)象外間距，將對(duì)象分別CSS命名為".億速云-a"至“.億速云-f”,實(shí)際使用時(shí)候更加需求命名。

四、讓左右結(jié)構(gòu)內(nèi)容之間有一定間距距離   

解決方法與技巧：
一般我們使用float 浮動(dòng)屬性（float:left（局左）、float:right（居右））來解決此問題。這樣的布局一般總的寬度一定，只需左、右內(nèi)容DIV寬度設(shè)置小于總寬度即可實(shí)現(xiàn)，注意的是寬度計(jì)算一定是包括自己設(shè)置寬度+邊框?qū)挾?padding寬度+margin寬度組成。
提示：在DIV CSS制作中很多時(shí)候需要計(jì)算的如這樣的布局。


實(shí)現(xiàn)以上效果，提示總寬度為200px,而左右布局都有邊框并中間間隔一定距離，這里為了樣式所以距離設(shè)置比較大。

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、實(shí)現(xiàn)設(shè)置總寬度為200px的(div-c)，左右DIV使用了float:left左浮動(dòng)（局左）和float:right右浮動(dòng)（局右），分別設(shè)置邊框和寬度
2、這里設(shè)置左右DIV塊(即div-a和div-b)總寬度+邊框小于總寬度(即div-c對(duì)象寬度)

關(guān)于“DIV間距設(shè)置的技巧有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“DIV間距設(shè)置的技巧有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

div
AI
助
手