在HTML裡,margin-top是設定該物件的距離與上一個物件的間距,他是設定物件邊框以外間距距離css樣式。今天就來帶大家好好認識一下margin-top
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中文網其它相關文章!
相關閱讀:
#以上是網頁製作中margin-top的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!