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

DIV CSS margin-right认识与用法

DIV CSS margin-right设置对象盒子右边外边距(间距)

1、margin-right作用:盒子对象设置此样式后,此对象边框外将靠右产生距离

2、margin-right语法:
margin-right:10px 设置对象右侧外间距为10px

3、margin-right示意图

设置margin-right效果示意图
设置margin-right效果示意图

1和2两个盒子未设置margin样式,当给予3设置margin-right值后出现3和4之间产生间距。

4、css margin-right实例
为了观察效果,首先DIVCSS5设置两个DIV盒子分别加上相同宽度、高度、边框等样式,为了让DIV并排divcss5设置div浮动float:left靠左观察两个盒子情况,然后再对第一个盒子加上margin-right:15px看看效果。

1)、未添加margin样式完整HTML+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>margin-right DIVCSS5实例</title> 
  6. <style> 
  7. .div-a,.div-b{ float:left; width:200px; height:100px; border:1px solid #F00} 
  8. /* CSS注释说明:以上代码代表.div-a和.div-b共用花括号里CSS样式 */ 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="div-a"></div> 
  13. <div class="div-b"></div> 
  14. </body> 
  15. </html> 

2)、未添加margin-right效果截图

未设置div margin-right效果截图
未设置div margin-right效果截图

3)、对".div-a"设置margin-right样式代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>margin-right DIVCSS5实例</title> 
  6. <style> 
  7. .div-a,.div-b{ float:left; width:200px; height:100px; border:1px solid #F00} 
  8. /* CSS注释说明:以上代码代表.div-a和.div-b共用花括号里CSS样式 */ 
  9. .div-a{ margin-right:15px} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="div-a"></div> 
  14. <div class="div-b"></div> 
  15. </body> 
  16. </html> 

4)、对".div-a"设置margin-right样式效果截图

设置margin-right效果截图
设置margin-right效果截图

从以上实例效果截图对“.div-a”设置margin-right样式可以实现盒子间距效果。

 

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

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