HTML+CSS 輕松入門(mén)之盒子模型之邊界
元素與其它元素之間的距離可以使用邊界(margin)來(lái)設(shè)置。邊界也是可分為上、右、下、左
下面我們寫(xiě)一個(gè)實(shí)例來(lái)講解;
首先我們先寫(xiě)一段沒(méi)有使用邊界的代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:200px; height:200px; border:1px solid red; } </style> </head> <body> <div id="dv1">php中文網(wǎng)</div> <div id="dv2">中華民族偉大復(fù)興</div> </body> </html>
倆個(gè)div 都是在一起的,如果我想讓倆個(gè)div之間的距離有30像素,應(yīng)該怎么去寫(xiě)css代碼?
#dv2{margin-top:30px;}
當(dāng)我們加上這句代碼,倆個(gè)div之間就有距離了
小伙伴們可以分別試試右邊,下邊 ,左邊,看看什么樣的一個(gè)效果