您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章跟大家分析一下“DIV CSS margin-right原理与用法是什么”。内容详细易懂，对“DIV CSS margin-right原理与用法是什么”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下，希望阅读后能够对大家有所帮助。下面跟着小编一起深入学习“DIV CSS margin-right原理与用法是什么”的知识吧。
DIV CSS margin-right设置对象盒子右边外边距（间距）
1、margin-right作用：盒子对象设置此样式后，此对象边框外将靠右产生距离
2、margin-right语法：
margin-right:10px 设置对象右侧外间距为10px
3、margin-right示意图
设置margin-right效果示意图
1和2两个盒子未设置margin样式，当给予3设置margin-right值后出现3和4之间产生间距。
4、css margin-right实例
为了观察效果，首先DIVCSS5设置两个DIV盒子分别加上相同宽度、高度、边框等样式，为了让DIV并排亿速云设置div浮动float:left靠左观察两个盒子情况，然后再对第一个盒子加上margin-right:15px看看效果。
1）、未添加margin样式完整HTML+CSS代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin-right DIVCSS5实例</title> <style> .div-a,.div-b{ float:left; width:200px; height:100px; border:1px solid #F00} /* CSS注释说明：以上代码代表.div-a和.div-b共用花括号里CSS样式 */ </style> </head> <body> <div class="div-a"></div> <div class="div-b"></div> </body> </html>2）、未添加margin-right效果截图
未设置div margin-right效果截图
3）、对".div-a"设置margin-right样式代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin-right DIVCSS5实例</title> <style> .div-a,.div-b{ float:left; width:200px; height:100px; border:1px solid #F00} /* CSS注释说明：以上代码代表.div-a和.div-b共用花括号里CSS样式 */ .div-a{ margin-right:15px} </style> </head> <body> <div class="div-a"></div> <div class="div-b"></div> </body> </html>4）、对".div-a"设置margin-right样式效果截图
设置margin-right效果截图
从以上实例效果截图对“.div-a”设置margin-right样式可以实现盒子间距效果。
css的全称是Cascading Style Sheets（层叠样式表），它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
关于DIV CSS margin-right原理与用法是什么就分享到这里啦，希望上述内容能够让大家有所提升。如果想要学习更多知识，请大家多多留意小编的更新。谢谢大家关注一下亿速云网站！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。