margin在css中什么意思

margin在css中的意思是外边距。

margin，是CSS语法，这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。margin简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有1到4个值。

margin属性接受任何长度单位、百分数值甚至负值。margin属性可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。margin跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。

在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。以上四个位置按顺序分别为：margin-top--margin-right--margin-bottom--margin-left，即“上-右-下-左”。

以下简写为top--right--bottom--left。其中需要注意的是后三种情况，当有像素值缺省时，浏览器会自动对缺省像素按照“bottom=top”和“left=right”的方法进行赋值。

1 盒子尺寸:border box。从boder 往里算原生api 是offsetWidth

2 盒子内部尺寸：padding box。从padding往里算。原生dom api是clientWidth

3 盒子外部尺寸:margin box。从margin往里算没有原生的dom api

1 如果元素有宽度，并且是块级元素此时添加margin:元素的宽度不会发生改变

2 父元素宽度不变，如果元素是块级，并且宽度没有给，那么margin的宽度会发生变化

3 元素margin在垂直方向上无法改变自身的内部尺寸，往往需要父元素作为载体

1 右侧定位的时候，只需要把的左浮动改成右浮动

1 上面这样处理的结果就是最右边一个会有20px的空格,虽然有其他不同的解决方法，但是这里用margin的写法

2 给ui加20px的宽度，对冲掉最后一个的20px的宽度

3 但是他这里说的都是float下的问题，不是不推荐使用float布局了么。。

1 只要元素是块状元素，无论有没有设置宽高，无论是水平还是垂直方向，即使发生了margin合并，margin对外部尺寸都实实在在的发生了变化

2 内联元素，完全无影响，不论是垂直方向，还是左右方向，不论是外部还是内部尺寸。但是加了margin还是会有间距显示的

1 使用padding-bottom实现留白有兼容性问题，因为不同的浏览器实现滚动的逻辑是不一样的，chrome以content box为基准算是否触发滚动条，ie和firefox则是超过padding box尺寸触发滚动条。

2 所以这种情况下直接使用margin-bottom，完全没有兼容问题

1 两个的宽度以最多的一个为基准，算高的。但是这个css也太狰狞了吧。flex直接实现，天然支持

2 实现原理:margin-bottom：-9999px先给外部尺寸在垂直方向减小9999px。padding-bottom：9999px又增加了元素高度，抵消了刚才的，对布局没有影响，但是带来了多的的9999px的可使用背景色多了这个多的可使用背景色，于是父元素overflow:hidden；消除了多余的颜色。这谁想出来的。。最关键的是这种方法兼容性超级强，ie6,ie7

1 和padding一样，也是相对于元素的宽度计算的

2 还是不要使用百分比算了，随便一调一个属性就是一个新的表现。完全解释不了啊一定要走宽阔的大路

1 必须知道的知识

2 填充规则1：如果一侧是固定值，一侧是auto，则auto为剩余空间大小

可以看到，没有margin-left的时候，虽然有了margin-right。但是是不生效的，因为流式布局先从左边走

3 填充规则2 ：两侧都是auto，平分固定值。这不是规则1 的特殊情况么。。

1 首先发现设置margin:auto;左右方向会自动居中，但是上下是无效的容器定高，容器定高为啥不行呢。

2 甚至发现如果单独给他添加margin-top：还会发生边距折叠，给父元素加上了

3 margin实现元素居中

1 display:inline计算值的非替换元素的垂直margin是无效的,虽然规范提到有渲染，但是浏览器表现的无迹可寻

可以看到，有margin值，但是效果表现是无效的

2 表格中的tr，td元素或者设置display:table-cell,table-row的margin都是无效的

3 绝对定位的非定位方位的margin值无效

4 高度确定父元素下子元素的margin-bottom。或者宽度确定的父元素下子元素的matgin-right失效。

本质是，如果想要margin改变自己的位置，那么必须是当前元素定位一样的方向才可以，否则就只会影响到其他兄弟元素，所以看图下一个的元素是明确可以看到被影响到了

5 鞭长莫及的margin无效

6 内联特性导致的margin无效

确实会在只剩一个屁股的时候不在上移动，不论负值多么变大，但是这个是父元素没有任何属性，加了一个absolute之后就不是这样了，没有这个限制了

1 内联替换元素,垂直margin是有效的，比如照片是一定是可以的，并且不会发生margin合并

2 如果计算值是table-caption,table或者inline-table则没有此问题

1 block元素，可以使用四个方向的margin值

2 inline元素，只可以使用左右方向的margin值

3 inline-block匀速，使用上下方向的值看起来是无效的，其实是和vertial-align的值有关系

1 两个block元素重叠时，后面元素可以覆盖前面元素的背景。但是无法覆盖内容，也就是内容是一起显示的

2 两个inline,两个inline-block，inline和inline-block元素重叠时，后面元素会覆盖前面元素

可以看到后面的覆盖了前面的

3 inline元素和block元素，inline覆盖block的背景，内容的话，是后面的覆盖前面的内容

4 最后，在浏览器不居中，浏览器将页面布局分为内容和背景，内容的层叠始终高于背景，block元素分为内容和背景，而inline元素或inline-block元素，本身就是内容

哦，是这样的，用javascript的DOM对象的GetElementBy系列方法，应该为这个<P>标签设置属性id值，比如设置后为：<p style="margin-top:20px; font-size:18px" id="product_price">您的余额为：￥198</p>，然后用var product_price=documentGetElementById("product_price")innerHTML，获取到这对<p></p>标签里面的HTML内容，然后用：

alert(product_price)d出对话框，显示给用户，当然也可以confirm(product_price)来d出对话框，显示给用户。

这是我的思路，正则表达式，我也正在学习，希望能给你帮助。

layouts 的每个子 layout 信息都支持 margins。参考 ViewGroup Margin Layout Attributes 列举了该类支持的所有子 view 的属性。

android:layout_marginBotton

在该 view 的底边指定一个特定的空间。这个空间是在 view 边界的外部。margin 值应该是正数。

必须是一个具体的值，一个浮点数字加一个单位如『145sp』。可选的单位有：px（pixels 象素），dp（density-independent pixels 密度独立象素），sp（scaled pixels based on perferred font size 基于优选字体大小的缩放像素『一般用于设置字体大小』），mm（millimeters 毫米）。

也可能是对包含该类型值的资源或主题属性的引用。

这相当于全局属性资源符号 layout_marginBottom。

相关的方法：

setMargins(int,int,int,int)

android:layout_marginEnd

在该 view 的结束的一边指定一个特定的空间。这个空间是在 view 边界的外部。margin 的值应该是正数。

必须是一个具体的值，一个浮点数字加一个单位如『145sp』。可选的单位有：px（pixels 象素），dp（density-independent pixels 密度独立象素），sp（scaled pixels based on perferred font size 基于优选字体大小的缩放像素『一般用于设置字体大小』），mm（millimeters 毫米）。

也可能是对包含该类型值的资源或主题属性的引用。

这相当于全局属性资源符号 layout_marginEnd。

相关的方法：

setMarginEnd(int)

android_marginLeft

在该 view 的左边指定一个特定的空间。这个空间是在 view 边界的外部。margin 的值应该是正数。

必须是一个具体的值，一个浮点数字加一个单位如『145sp』。可选的单位有：px（pixels 象素），dp（density-independent pixels 密度独立象素），sp（scaled pixels based on perferred font size 基于优选字体大小的缩放像素『一般用于设置字体大小』），mm（millimeters 毫米）。

也可能是对包含该类型值的资源或主题属性的引用。

这相当于全局属性资源符号 layout_marginLeft。

相关的方法：

setMargins(int,int,int,int)

android:layout_marginRight

在该 view 的右边指定一个特定的空间。这个空间是在 view 边界的外部。margin 的值应该是正数。

必须是一个具体的值，一个浮点数字加一个单位如『145sp』。可选的单位有：px（pixels 象素），dp（density-independent pixels 密度独立象素），sp（scaled pixels based on perferred font size 基于优选字体大小的缩放像素『一般用于设置字体大小』），mm（millimeters 毫米）。

也可能是对包含该类型值的资源或主题属性的引用。

这相当于全局属性资源符号 layout_marginRight。

相关的方法：

setMargins(int,int,int,int)

android:layout_marginStart

在该 view 的开始的一边指定一个特定的空间。这个空间是在 view 边界的外部。margin 的值应该是正数。

必须是一个具体的值，一个浮点数字加一个单位如『145sp』。可选的单位有：px（pixels 象素），dp（density-independent pixels 密度独立象素），sp（scaled pixels based on perferred font size 基于优选字体大小的缩放像素『一般用于设置字体大小』），mm（millimeters 毫米）。

也可能是对包含该类型值的资源或主题属性的引用。

这相当于全局属性资源符号 layout_marginStart。

相关的方法：

setMarginStart(int)

android:layout_marginTop

在该 view 的上边指定一个特定的空间。这个空间是在 view 边界的外部。margin 的值应该是正数。

必须是一个具体的值，一个浮点数字加一个单位如『145sp』。可选的单位有：px（pixels 象素），dp（density-independent pixels 密度独立象素），sp（scaled pixels based on perferred font size 基于优选字体大小的缩放像素『一般用于设置字体大小』），mm（millimeters 毫米）。

也可能是对包含该类型值的资源或主题属性的引用。

这相当于全局属性资源符号 layout_marginTop。

相关的方法：

setMargins(int,int,int,int)

public int bottomMargin

以象素为单位的下边距。margin 值应该是正数。调用 setLayoutParams(LayoutParamsp) 方法后为这个值重新分配一个新的值。

public int leftMargin

以象素为单位的左边距。margin 值应该是正数。调用 setLayoutParams(LayoutParamsp) 方法后为这个值重新分配一个新的值。

public int rightMargin

以象素为单位的右边距。margin 值应该是正数。调用 setLayoutParams(LayoutParamsp) 方法后为这个值重新分配一个新的值。

public int topMargin

以象素为单位的上边距。margin 值应该是正数。调用 setLayoutParams(LayoutParamsp) 方法后为这个值重新分配一个新的值。

public ViewGroupMarginLayoutParams(Context c,AttributeSet attrs)

创建一个新的布局参数集合。这些值是从提供的属性集合和 context 中提取的。

参数

c 应用的环境

attrs 来自于布局参数的属性集合

public ViewGroupMarginLayoutParams(int width,int height)

public ViewGroupMarginLayoutParams(ViewGroupMarginLayoutParams source)

复制构造方法。克隆 source 的宽、高和 margin 值。

参数

source 克隆的对象

public int getLayoutDirection()

返回布局的方向。可以是 LAYOUT_DIRECTION_LTR 或是 LAYOUT_DIRECTION_RTL 。

返回值

int 布局的方向

public int getMarginEnd()

返回以象素为单位的结尾 margin 值。

相关的 XML 属性值

android:layout_marginEnd

返回值

int 以象素为单位的结尾 margin 值

public int getMarginStart()

返回以象素为单位的开始的 margin 值。

相关的 XML 属性值

android:layout_marginStart

返回值

int 以象素为单位的开始 margin 值

public boolean isMarginRelative()

检查 margin 是否相对。

相关的 XML 属性

android:layout_marginStart

android:layout_marginEnd

返回值

boolean marginStart 或 marginEnd 已经设定，返回 true

public void resolveLayoutDirection(int layoutDircetion)

由 requestLayout()方法调用。根据布局的方向可以重写左右 margin 的值。

参数

layoutDircetion 布局的方向值（int）

public void setLayoutDircetion(int layoutDirection)

设置布局的方向。

参数

layoutDirection 布局的方向。LAYOUT_DIRECTION_LTR 或是 LAYOUT_DIRECTION_RTL

public void setMarginEnd(int end)

设置相对结束 margin。margin 值应该是正数。

相关的 XML 属性

android:layout_marginEnd

参数

end 结束 margin 的值

public void setMarginStart(int start)

设置相对开始 margin。margin 值应该是正数。

相关的 XML 属性

android:layout_marginStart

参数

start 开始 margin 的值

public void setMargins（int left,int top,int right,int bottom）

设置 margin，以象素为单位。需要先调用 requestLayout() 方法，这样新的 margin 值才能被使用。根据布局的方向左右 margin 值可能会被重写。margin 值应该是正数。

相关的 XML 属性

android:layout_marginLeft

android:layout_marginTop

android:layout_marginRight

android:layout_marginBottom

参数

left 左 margin 值

top 上 margin 值

right 右 margin 值

bottom 下 margin 值

原则上，行内元素（inline）是不能够设置宽高（width/height）、上下内边距（padding-top/padding-bottom）和上下外边距（margin-top/margin-bottom），因为同一行的所有行内元素在纵向的位置是一个整体，设置其中某个元素的上下边距，则整行都会跟随变化，当超出边框范围时（比如margin-top设为负值）则无效（除非行内的所有元素都设为同样的数值）。

当然，行内块级元素（inline-block）是可以设置宽高（width/height）的，但在上下边距的问题上仍然遵循行内元素的原则。

如果把display改为block，你会发现设为margin-top:-100px的box1立刻就上移了。

以上就是关于margin在css中什么意思全部的内容，包括:margin在css中什么意思、深入理解margin属性、求助怎么用正则表达式提取 <p style="margin-top:20px; font-size:18px">您的余额：￥1.98</p> 里面的1.98等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！