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. Async和Await 异步方法

    Async和Await关键字是C#异步编程的核心.通过使用这两个关键字,你可以使用.NET Framework或Windows Runtime的资源创建一个异步方法如同你创建一个同步的方法一样容易.通 ...

  2. codeforces586B

    Laurenty and Shop CodeForces - 586B A little boy Laurenty has been playing his favourite game Nota f ...

  3. codeforces604B

    More Cowbell CodeForces - 604B Kevin Sun wants to move his precious collection of n cowbells from Na ...

  4. 微信access_token请求之简单缓存方法封装

    还有东西要搞,就直接上代码 function.php <?php // 一个好玩的 curl 类 // https://github.com/metowolf/Meting/blob/maste ...

  5. 自学Linux Shell2.2-GHOME Terminal仿真器

    点击返回 自学Linux命令行与Shell脚本之路 2.2-GHOME Terminal仿真器 GNOME Terminal是GNOME桌面环境的默认终端仿真器.很多发行版,如RHEL.Fedora和 ...

  6. 【洛谷5月月赛】玩游戏(NTT,生成函数)

    [洛谷5月月赛]玩游戏(NTT,生成函数) 题面 Luogu 题解 看一下要求的是什么东西 \((a_x+b_y)^i\)的期望.期望显然是所有答案和的平均数. 所以求出所有的答案就在乘一个逆元就好了 ...

  7. shell(2)-&& 与 || 逻辑或与非

    test 命令测试 -常见的测试类型–测试文件状态–字符串比较–整数值比较–逻辑测试&& 如果是“前面”(真),则“后面”[ -f /var/run/dhcpd.pid ] & ...

  8. android + eclipse + 后台静默安装(一看就会)

      首先要说到三个类. import android.content.pm.IPackageInstallObserver; import android.content.pm.IPackageIns ...

  9. 最小割求法&&可行边和必须边

    最小割的可行边与必须边 就是在残量网络上跑tarjan 可行边: 满流并且残量网络上不能存在入点到出点的路径 必须边: 满流并且残量网络上入点能从源点到达,出点能到汇点. 任意一种最小割求法: 跑一边 ...

  10. [SDOI2016]储能表——数位DP

    挺隐蔽的数位DP.少见 其实减到0不减了挺难处理.....然后就懵了. 其实换个思路: xor小于k的哪些都没了, 只要留下(i^j)大于等于k的那些数的和以及个数, 和-个数*k就是答案 数位DP即 ...