首页前端开发CSSDIV CSS margin-right认识与用法

DIV CSS margin-right认识与用法

时间2024-05-24 19:40:03发布访客分类CSS浏览107
导读:DIV CSS margin-right设置对象盒子右边外边距(间距) 1、margin-right作用:盒子对象设置此样式后,此对象边框外将靠右产生距离 2、margin-right语法: margin-right:10px 设置对象右侧...

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并排divcss5设置div浮动float:left靠左观察两个盒子情况,然后再对第一个盒子加上margin-right:15px看看效果。

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

  1. margin-rightDIVCSS5实例
  2. .div-a,.div-b{ float:left; width:200px; height:100px; border:1pxsolid#F00}
  3. /*CSS注释说明:以上代码代表.div-a和.div-b共用花括号里CSS样式*/

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


未设置div margin-right效果截图

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

  1. margin-rightDIVCSS5实例
  2. .div-a,.div-b{ float:left; width:200px; height:100px; border:1pxsolid#F00}
  3. /*CSS注释说明:以上代码代表.div-a和.div-b共用花括号里CSS样式*/
  4. .div-a{ margin-right:15px}

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


设置margin-right效果截图

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

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: DIV CSS margin-right认识与用法
本文地址: https://pptw.com/jishu/667243.html
linux重新安装jdk要注意什么 div浮动层与div层有何不同css中有什么关系

游客 回复需填写必要信息