欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

div css margin-top认识与实例教程

div css margin-top认识与实例教程篇

margin-top是设置该对象距离上一个对象间距,他是设置对象边框以外间距距离css样式

一、margin-top语法   -   TOP

  1. .divcss5{margin-top:10px} 

设置了对象“.divcss5”上边间距为10px
相关教程:margin

二、margin-top应用实例   -   TOP

为了观察效果,DIVCSS5实例设置3个DIV盒子,均设置相同的宽度、相同高度、相同css边框,对第二个div层设置margin-top:10px;对第三个div层设置margin-top:20px,观察效果掌握margin-top样式作用。三个对象层分别DIV class命名为“.div1”“.div2”“.div3”

1、div css实例完整HTML+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>margin-top在线实例 DIVCSS5</title> 
  6. <style> 
  7. .div1,.div2,.div3{ width:300px; height:80px; border:1px solid #F00} 
  8. /* css 注释说明:设置三对象相同宽度 高度 红色边框 */ 
  9. .div2{ margin-top:10px}/* css注释说明:设置对象距离上对象10px间距 */ 
  10. .div3{ margin-top:20px}/* div css注释说明:设置对象距离上对象20px间距 */ 
  11. </style> 
  12. </head> 
  13. <body> 
  14. <div class="div1"></div> 
  15. <div class="div2"></div> 
  16. <div class="div3"></div> 
  17. </body> 
  18. </html> 

DIVCSS5对“.div2”“.div3”选择器对象设置不同margin-top数值。

2、DIV+CSS margin-top实例截图

margin-top应用实例截图
margin-top应用实例截图

3、在线演示:查看案例

4、打包下载源文件:

5、CSS样式使用总结
margin-top是设置对象距离上对象距离设置,如果对象没有设置背景、边框可以使用padding-top替代。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r634.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-10-30 16:41 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。