css的margin样式,css的marginleft

CSS样式里的padding和margin是什么意思,有何作用

Padding:这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。值 描述

* padding-top

* padding-right

* padding-bottom

* padding-left

设置内边距。

值可以是：

* 百分比（基于父元素宽度的百分比）

* 长度值（固定的padding值）

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

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

值 描述

* margin-top

* margin-right

* margin-bottom

* margin-left

设置针对边距的属性。

值可以是：

* 百分比（基于父对象总高度或宽度的百分比）

* 长度值（定义一个固定的边距）

* auto（浏览器设定的值）。

默认值：未定义。

相关问答

Q1: CSS中margin和padding的区别

CSS中margin和padding有以下三方面区别。

在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

1、语法结构。

padding：

padding-left:10px; 左内边距、padding-right:10px; 右内边距、padding-top:10px; 上内边距、padding-bottom:10px; 下内边距。

margin：margin-left:10px; 左外边距、margin-right:10px; 右外边距、margin-top:10px; 上外边距、margin-bottom:10px; 下外边距。

2、可能取的值。

padding：length规定具体单位记的内边距长度、%基于父元素的宽度的内边距的长度、auto浏览器计算内边距、inherit 规定应该从父元素继承内边距。

margin：length  规定具体单位记的外边距长度、%基于父元素的宽度的外边距的长度、auto浏览器计算外边距、inherit 规定应该从父元素继承外边距。

3、浏览器兼容问题。

padding：所有浏览器都支持padding属性、任何版本IE都不支持属性值“inherit”。

margin：所有浏览器都支持margin属性、任何版本IE都不支持属性值“inherit”。

Q2: CSS属性margin是什么意思？

margin:0 auto 0px表示上外抄边距为0px，左右外边距自动，下外边距为0px。

margin跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。

扩展资料：

“margin:20px 40px;”表示top为20px，right为40px；由于bottom和left缺省，所以自动将它们分别设为20px和40px。转化为第4种写法为：“margin:20px 40px 20px 40px;”。

“margin:20px 40px 60px;”表示top为20px，right为40px，bottom为60px；由于left缺省，所以自动将它设为40px。转化为第4种写法为：“margin:20px 40px 60px 40px;”。

需要注意的是一种情况不能写为缺省写法：“margin:20px 40px 20px 60px;”。该例中，由于top和bottom相同，但right和left不同，所以不能将bottom缺省，否则会等同于“margin:20px 40px 60px 40px;”。

Q3: css margin

CSS:

#header,#footer{border:solid 1px #FF0033;height:20px;}

#main{padding:1px;margin:10px;border:solid 1px #F03;height:1%;}

#content{margin:200px;width:50px;border:solid 1px #F03;background:#C69;}

XHTML:

div id="header"/div

div id="main" onclick="alert(this.currentStyle.hasLayout)"

div id="content"ttttt/div

/div

div id="footer"/div

OK,我来解释一下，这个问题涉及到CSS的两个话题：“空白边叠加”和“IE拥有布局”。

首先，你应该已经对“空白边叠加“这个问题有所了解，如果不然，则你可以此为关键字在网上搜索一下，这个问题非常普遍，所以我就不再这里复制粘贴了，

下面说说导致问题的原因：

在IE中,"拥有布局的元素之间空白边不叠加"，

当main的样式为：

#main{padding:1px;margin:10px;border:solid 1px #F03;}

这时候 div id="main" onclick="alert(this.currentStyle.hasLayout)"

通过JS探测到此时的main元素没有“拥有布局”,所以"空白边叠加"了，

为了使main元素"拥有布局"，将main的样式设置为：

#main{padding:1px;margin:10px;border:solid 1px #F03;height:1%;}

（实际应该为：

#main{padding:1px;margin:10px;border:solid 1px #F03;}

/* IE5-MAC 隐藏\*/

* html #main{height:1%;}

/* 不在 IE5-MAC中隐藏 */

）

即为元素设置任意高度（其他方法请搜索之）使其”拥有布局“，问题便解决了。IE的”拥有布局“会导致很多问题，所以你可以深入了解下这个问题，以便在以后遇到类似的问题轻松解决。

Q4: 网页设计中CSS样式里设定margin:0 20px 30% 0;其中30%是相对于什么?是个什么概念?

margin是用来设定该元素与相邻元素直接的距离。

margin:0

20px

30%

0对应的是与上，右，下，左四边相邻元素的距离。

30%指下边距为其父元素的宽度的30%

补充：

1.如果margin只有三个值，按照值的顺序为margin：top

right

bottom;

缺少了left，根据原则，则left的值有right来代替。

margin:10px

20px

30px;就等于margin:10px

20px

30px

20px;

2.如果margin只有两个值，按照值的顺序为margin：top

right;

缺少了bottom和left，根据原则left的值由right来代替，bottm的值由top来代替。

margin:10px

20px;就等于margin:10px

20px

10px

20px;

3.如果margin只有一个值，按照值的顺序为margin:top;

缺少了bottom、left和right，根据原则left的值由right来代替，bottom的值由top来代替，right的值右top来代替，也就是说left的值也由top来代替。

margin:10px;就等于margin:10px

10px

10px

10px;

Q5: 网页css样式,margin问题

这是内核浏览器的bug,很普遍的问题。解决的方法有几种：

1.margin换成padding（最快捷的方法）

2.使用浮动

3.给父级div加点内容，比较边框之类。或者在id=lianjie_t的div之前加点内容

具体不懂的话可以M我，互相帮助，望采纳。。。

补充下，这个问题在IE6是可以的，是浏览器的BUG问题，只要是父级div没有内容（也就是id=lianjie_t之前没内容），而且使用margin就会出现这个问题。别和自己较劲。。。