• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS margin属性介绍与用法(附margin解剖图)

CSS margin属性介绍与用法(附margin解剖图)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,margin等相关知识,佚名 希望在学习及工作中可以帮助到您

margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的。

margin属性包含了margin left :距左元素块距离(设置距左内边距) ;margin top:距头顶(上)元素块距离(设置距顶部元素块距离);margin right :距右元素块距离(设置距右元素块距) ;margin bottom :底元素块距离(设置距低(下)元素块距)。其二维构建图可见CSS属性二维图。

CSS元素中margin的解剖图
margin的解剖图


margin left用法:margin-left:10px;  这个意思距离左元素块距10像素,可跟百分比如(margin-left:10%;   距离左元素块10%的距离);
margin right用法:margin-right:10px; 这个意思距离右边元素块距10像素,可跟百分比如(margin-right:10%; 距离右边元素块10%的距离);
margin top用法:margin-top:10px; 这个意思距离顶边元素块距10像素,可跟百分比如(margin-top:10%; 距离顶边元素块10%的距离);
margin bottom用法:margin-bottom:10px; 这个意思距离低边元素块距10像素,可跟百分比如(margin-bottom:10%; 距离底边元素块10%的距离);
注意margin中间的链接“ - ”号,设置距离值时用“ : ”并赋予值,并以“ ; ”结束,并且全部用小写半角字母。

如果是左右上下都需要设置margin的值时可以简写来实现,以优化css 。
如简写方式有:
margin:10px; 意思就是上下左右元素块距离就是10px(10像素)等于margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; 一样效果简写;
margin:5px 10px; 意思上下元素块距离为5px,左右的元素块距离为10px,等于margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 一样效果简写;
margin:5px 6px 7px; 意思上元素块距离5px,下元素块距离为7PX,左右元素块距离为6px,等于margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; 一样效果简写;
margin:5px 6px 7px 8px;  意思上元素块为5px,右元素块距离为6px ,下元素块距离为7px,左元素块距离8px,等于等于margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 一样效果简写;

其中margin:5px 6px 7px 8px; 的转法为顺时针即图:

css中margin的属性转法图
margin的属性转法图解


上面即是div css网站总结的margin的属性与用法。其中margin的用与padding相同。

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS 网页布局排版实例
  • 2017-08-06一款纯css实现的漂亮导航菜单(也适用于个人中心)
  • 2017-08-06苹果iPhone safari浏览器样式重置修复submit按钮圆角bug
  • 2017-08-06css font-size属性说明
  • 2017-08-06WEB标准心得之网页重构的思路
  • 2017-08-06css实现瀑布流空白处背景粉色背景块
  • 2017-08-06详解CSS中视窗单位和百分比单位的使用
  • 2017-08-06CSS list-style修改列表属性控制li标签样式
  • 2017-08-06纯CSS实现3D按钮效果实例代码
  • 2017-08-06css将div层固定显示在页面底部不随滚动条滚动

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 通过浮动+定位实现两个div在同一行
    • CSS在固定宽高的div内实现垂直居中的实例详解
    • css3的transform中scale缩放详解
    • CSS 控制页面样式的4种方式和优先级问题
    • css仿word首字下沉效果示例
    • 27款经典的CSS框架小结 网页制作必备
    • CSS选择器的权重与优先规则分享
    • 利用UL、Li+CSS属性制作无表格实用菜单导航效果
    • css 省略号 css3让多余的字符串消失并附加省略号的实现代码
    • div+css背景渐变色代码示例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有