margin-top文法
.div{margin-top:10px}
設定了對象“.div”上邊間距為10px
相關教程：margin
二、margin-top應用執行個體
為了觀察效果，執行個體設定3個DIV盒子，均設定相同的寬度、相同高度、相同css邊框，對第二個div層設定margin-top:10px;對第三個div層設定margin-top:20px，觀察效果掌握margin-top樣式作用。三個對象層分別DIV class命名為“.div1”“.div2”“.div3”
執行個體完整HTML+CSS代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin-top線上執行個體</title> <style> .div1,.div2,.div3{ width:300px; height:80px; border:1px solid #F00} /* css 注釋說明：設定三對象相同寬度 高度 紅色邊框 */ .div2{ margin-top:10px}/* css注釋說明：設定對象距離上對象10px間距 */ .div3{ margin-top:20px}/* div css注釋說明：設定對象距離上對象20px間距 */ </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html>
margin-top是設定對象距離上對象距離設定，如果對象沒有設定背景、邊框可以使用padding-top替代。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
Css3中的transform 漸層屬性怎麼使用
Css3製作動態開關的效果的實現步驟
CSS3中動畫技術的實現步驟
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
