CSS margin 属性


定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。


例子 1

margin:10px 5px 15px 20px;
  • 上外边距是 10px
  • 右外边距是 5px
  • 下外边距是 15px
  • 左外边距是 20px

例子 2

margin:10px 5px 15px;
  • 上外边距是 10px
  • 右外边距和左外边距是 5px
  • 下外边距是 15px

例子 3

margin:10px 5px;
  • 上外边距和下外边距是 10px
  • 右外边距和左外边距是 5px

例子 4

margin:10px;
  • 所有 4 个外边距都是 10px

浏览器支持

所有浏览器都支持 margin 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。


可能的值

描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

CSS——margin的更多相关文章

  1. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  2. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  3. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  4. CSS Margin(外边距)

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

  5. 细说 CSS margin

    作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...

  6. CSS:CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

  7. CSS margin collapsing All In One

    CSS margin collapsing All In One margin collapsing margin 塌陷 / margin 合并 会出现 margin collapsing 的 3 种 ...

  8. css margin

    css中margin边界叠加问题: 看个同方向和异方向margin重叠现象: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  9. HTML CSS——margin和padding的学习

    你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...

随机推荐

  1. Lodop不要把客户端的打印机共享到服务器上 再在客户端打印

    客户端打印需要每个客户端都安装,Lodop插件方式和C-Lodop方式,都是安装一次后,无需再次安装,c-lodop默认也是开机自启动的.集中打印方式,可以打印到某台电脑(作为云主机)上,但是不能打印 ...

  2. jenkins--使用命令行自动启动Jenkins的job

    Jenkins作为持续集成强大的开源工具,除了使用界面它还有强大的cli命令. 1 自动启动jenkins 的job: 启动不带参数的job: curl --user USER:PASSWORD JE ...

  3. Code First NotMapped

    转载:http://www.cnblogs.com/libingql/p/3352058.html 不需要映射的字段,添加 NotMapped 6.非数据库字段属性 在类中,如果有一些属性不需要映射到 ...

  4. codeforces 793B. Igor and his way to work

    B. Igor and his way to work time limit per test 3 seconds memory limit per test 256 megabytes input ...

  5. 03 自学Aruba之2.4GHz及5GHz无线信道

    点击返回:自学Aruba之路点击返回:自学Aruba集锦 03 自学Aruba之2.4GHz及5GHz无线信道 1.  2.4GHz信道 在各国家授权使用的频段: 信道号 中心频率(GHz) 美国FC ...

  6. Android GPS定位测试(附效果图)

    今天因为工作需要,把以前编写的一个GPS测试程序拿出来重新修改了一下.这个程序说起来有些历史了,是我11年编写的,那时候学了Android开发没多久,算是一个实验性的作品.现在工作需要,重新拿出来修整 ...

  7. html5 viewport使用

    用html5开发移动应用时往往会遇到手机的分辨率或屏幕大小不同的问题,如何使我们开发出来的应用或页面大小能适合各种手机呢?html5中的viewport能帮你做到. viewport 语法介绍: &l ...

  8. HTML 浏览器对象 讲解

    Window对象 Ø  属性 •    Document:文档对象 •    Event:事件对象 •    History:历史记录对象 •    Location:位置对象 •    Name:w ...

  9. Office web apps 打补丁后(安装PDF在线浏览) 错误解决

        最近为了能让PDF在线review,所以安装了460287_intl_x64_zip.exe 这个OWA的hotfix, 安装后,发现OWA挂了,一段搜索之后,发现要重新配置OWA: 1. 在 ...

  10. 教你如何开启/关闭ubuntu防火墙

    目录  [隐藏]  1 安装方法 2 使用方法 3 推荐设置 4 详细使用说明 安装方法 sudo apt-get install ufw 当然,这是有图形界面的(比较简陋),在新立得里搜索gufw试 ...