該樓層疑似違規已被系統折疊?隱藏此樓查看此樓

給你簡單的寫了個例子，你看看吧，具體還要你網上查下相關資料，這里說的比較籠統！

代碼：

新建網頁

/*這里是margin設置距離*/

#div1{

width: 200px;

height: 300px;

background: blue;

}

#div2{

width: 200px;

height: 300px;

background: red;

margin-top: 20px;/*div2的頂部到div1的距離是20px*/

}

/*這里是padding設置距離*/

#div3{

width: 600px;

height: 600px;

background: orange;

padding-top: 20px;/*div3內部的塊div4到div3的上邊框的距離是20px*/

padding-left: 50px;/*div3內部的塊div4到div3的左邊框的距離是50px*/

}

#div4{

width: 300px;

height: 300px;

background: black;

}

/*這里是用絕對定位設置距離*/

#div5{

width: 600px;

height: 600px;

background: yellow;

position: relative; /*設置div5為相對定位，因為div6的絕對定位是相對于上一個帶有相對定位的父標簽來定位*/

}

#div6{

width: 600px;

height: 300px;

background: green;

position: absolute;/*設置div6為絕對定位*/

left: 100px;/*div6到div5左側的距離為100px*/

top: 100px;/*div6到div5上邊框的距離為100px*/

}

1111222233334444455555666666

總結

以上是生活随笔為你收集整理的html怎么查看两个块的距离,两个东西之间的距离怎么控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。