margin属性

原创 2012年03月27日 18:21:16

margin 属性设置元素的外边距。

该属性可使用 1 到 4 个值:

  • 如果规定一个值,比如 div {margin: 50px} - 所有的外边距都是 50 px
  • 如果规定两个值,比如 div {margin: 50px 10px} - 上下外边距是 50px,左右外边距是 10 px。
  • 如果规定三个值,比如 div {margin: 50px 10px 20px}- 上外边距是 50 px,而左右外边距是 10 px,下外边距是 20 px。
  • 如果规定四个值,比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px,右外边距是 10 px,下外边距是 20 px,左外边距是 30 px。

语法:

Object.style.margin=margin

可能的值:

描述
margin

设置外边距。

值可以是:

  • 百分比(基于父对象总高度或宽度的百分比)
  • 长度值(定义一个固定的边距)
  • auto(浏览器设定的值)。

实例

下面的例子改变了段落的外边距:

<html>
 <head>
<script type="text/javascript">
 function changeMargin()
{
document.getElementById("p1").style.margin="100px";
}
 </script>
</head>
<body>


<input type="button" onclick="changeMargin()"

value="Change margins of a paragraph" />

<p id="p1">This is a paragraph</p>

</body>
</html>

深入理解margin属性

百分比margin的计算规则 普通元素的百分比margin都是相对于容器的宽度计算的 计算之后水平方向的margin和垂直方向的margin都是60px 绝对定位元素的百分比margin是...
  • sjinsa
  • sjinsa
  • 2017年04月30日 11:18
  • 434

Android使用程序代码设置控件的margin属性

android页面通常是通过布局的XML文件进行控制的,今天讲一下我自己个人在学习android的过程中通过代码生成页面,并且通过代码控制控件的大小和样式,先看一下最终的效果图:     注:L...
  • mangguochang
  • mangguochang
  • 2015年02月28日 14:28
  • 1011

html5标签为什么会有margin和padding两个属性?

个人理解,html5中的每一标签就是一个控件,每一个控件都有自己的大小,如果我们不进行设置其大小,那么控件就会使用默认值。    假设说我现在有一个控件,type类型为button,这个button...
  • fengyufuchen
  • fengyufuchen
  • 2016年09月12日 17:14
  • 2293

padding和margin两个重要属性的介绍及举例

如果有一点Html基础的话, 就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级(top-leve...
  • lishimin1012
  • lishimin1012
  • 2015年11月24日 16:55
  • 1777

CSS利用margin属性使整个页面居中

使用一个包裹层将页面主题包裹起来,设置width和margin就可以使整个页面居中。 width是页面内容区的宽度,margin是外边距,将左右外边距设为auto后,变可以自动计算左右外边距导致页面居...
  • juhaotian
  • juhaotian
  • 2015年06月29日 14:40
  • 518

Android关于margin、align、padding等一些常用的属性

layout_margin:该属相的意思是该控件与父控件边缘之间的距离,其中包括四个方向,layout_marginLeft、layout_marginTop、layout_marginRight、l...
  • a1010012805
  • a1010012805
  • 2015年05月23日 11:43
  • 1949

css margin缩写简写

margin属性CSS样式,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。 1、只有上下情况缩写 原始:margin-top:5px; margin-bottom:6px 缩写简写为:ma...
  • sixteen_cicle
  • sixteen_cicle
  • 2016年07月28日 17:40
  • 462

margin属性的四个方向的顺序

margin-top ,margin-right ,margin-bottom ,margin-left 。值可以是: 百分比(基于父对象总高度或宽度的百分比) 长度值(定义一个固定的边...
  • tykw163
  • tykw163
  • 2008年05月10日 11:23
  • 4539

设置margin-top值时,溢出到父元素

给子元素margin-top时,若这个子元素前面没有其他内容,这个margin-top值会应用到父元素上 解决方案,给父元素设置:before body:before{ content...
  • ning0_o
  • ning0_o
  • 2016年08月12日 10:03
  • 1022

CSS margin属性详解

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1-4个值。margin的默认值是0。没有继承性,也就是说给父元素设置的margin值并不会自动传递到子元素中。...
  • man_tutu
  • man_tutu
  • 2017年02月11日 21:23
  • 238
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:margin属性
举报原因:
原因补充:

(最多只允许输入30个字)