讓上下兩個DIV塊之間有一定距離或沒有距離


1、若想上下DIV塊之間距離,只需設定:在CSS里設置DIV標簽各屬性參數為0
div{margin:0;border:0;padding:0;}
這里就設置了DIV標簽CSS屬性相當於初始化了DIV標簽CSS屬性,這里設置margin外邊距為0;邊框border屬性為0和內補白也為0;這樣相當於就初始化了DIV之間距各屬性距離為0,這樣就不會造成DIV直接有一定的距離。

2、如果想上下兩個DIV間有距離的話,只需設定div中的margin屬性即可,本例中div屬性對全局DIV塊都適用,代碼如下:

復制代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">
<!--設置DIV塊的邊界為5px-->
div{margin:5px;border:0;padding:0;}
#Box1{
width:200px;
height:72px;
background-color:#666;
}
#Box2{
width:200px;
height:72px;
background-color:#F0F;
}
</style>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>讓上下兩個DIV塊之間有一定距離或沒有距離</title>
</head>

<body>
<div id="Box1"></div>
<div id="Box2"></div>
</body>

</html>
復制代碼

這里設置了DIV塊的邊界為5px,當有上下兩個DIV塊時,邊界是重合的,按大的來,所以這里上下兩個DIV塊的距離是5px(只取其中大的邊界值,此處全局設定都是5px)

效果圖:

如不想全局設置DIV塊之間的邊界,可在各個DIV塊之間進行單獨設置margin。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM