margin和padding属性详解,margin属性和padding属性的区别?
margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。 下面讲解 padding和margin常用的用法 一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内边距 （3）padding-top:10px; 上内边距 （4）padding-bottom:10px; 下内边距 （5）padding：10px; 四边统一内边距 （6）padding:10px 20px; 上下、左右内边距 （7）padding:10px 20px 30px; 上、左右、下内边距 （8）padding:10px 20px 30px 40px; 上、右、下、左内边距 2、可能取的值 （1）length 规定具体单位记的内边距长度 （2）% 基于父元素的宽度的内边距的长度 （3）auto 浏览器计算内边距 （4）inherit 规定应该从父元素继承内边距 3、浏览器兼容问题 （1）所有浏览器都支持padding属性 （2）任何版本IE都不支持属性值“inherit” 二、margin 1、语法结构 （1）margin-left:10px; 左外边距 （2）margin-right:10px; 右外边距 （3）margin-top:10px; 上外边距 （4）margin-bottom:10px; 下外边距 （5）margin:10px; 四边统一外边距 （6）margin:10px 20px; 上下、左右外边距 （7）margin:10px 20px 30px; 上、左右、下外边距 （8）margin:10px 20px 30px 40px; 上、右、下、左外边距 2、可能取的值 （1）length 规定具体单位记的外边距长度 （2）% 基于父元素的宽度的外边距的长度 （3）auto 浏览器计算外边距 （4）inherit 规定应该从父元素继承外边距 3、浏览器兼容问题 （1）所有浏览器都支持margin属性 （2）任何版本IE都不支持属性值“inherit”
css中margin和padding区别以及用途是什么？刚学css被这两个东西困扰了很久
一、margin属性
CSS中的margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。margin是四个外边距属性设置的简写。四个外边距属性设置分别是：?margin-top，?margin-right，?margin-bottom?和?margin-left。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 px。
设置Margin属性的几种方式：
1、同时设置给定元素的四个外边距
//设置h1元素具有向上20px、向右30px、向下30px、向右20px的外边距。
h1 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
这样是看上去是不是很复杂呢？前面我们介绍了margin属性是四个外边距属性设置的简写。所以我们可以将上面设置h1元素外边距的代码简写为：
h1{
margin: 20px 30px 30px 20px;
}
? ? ?设置值的顺序是从上外边距开始围着元素顺时针旋转的器对应关系如下：
h1{
margin: top right bottom left;
}
2、margin属性中不一定必须要传入四个属性值，它分为一下几种情况：
·?只有一个??值时，这个值会被指定给全部的?四个边。
·?两个?值时，第一个值被匹配给?上和下, 第二个值被匹配给?左和右。
·?三个?值时，第一个值被匹配给?上, 第二个值被匹配给?左和右, 第三个值被匹配给?下。
·?四个?值时，会依次按?上、右、下、左?的顺序匹配?(即顺时针顺序)。
示例如下：
h1{margin: 1px;}//等价于 h1{1px 1px 1px 1px}
h1 {margin: 0.5px 1px;}// 等价于 h1{0.5px 1px 0.5px 1px }
h1 {margin: 0.25px 1px?0.5px;}//等价于h1{?0.25px 1px 0.5px 1px}
3、设置单边或多边外边距的语法
//设置向上外边距为20px。
h1{margin-top: 20px;}
//设置上外边距和左外边距均为20px
h1{margin-top: 20px; margin-left: 20px;}
二、padding属性
padding属性则是设置给定元素内边距的属性，它和margin属性一样也是四个内边距属性的简写，四个内边距属性分别是：padding-top、padding-right、padding-bottom、padding-left。它的使用方法与margin属性的使用方法也是相类似的，这里就不再说明了。
三、padding属性和margin属性的区别
padding属性和margin属性的区别这就涉及到了CSS中的盒模型了。下图是一个盒模型的图示。当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。padding属性是设置是内容框与边框之间的距离的属性，而margin属性则是设置元素外边框与其他元素的距离。这就是他们的区别。这些内容都是属于CSS中的基础知识。在一个叫做秒秒学的网中有相关的介绍，有兴趣可以看看。
在html中margin跟padding是什么意思？
margin的定义和用法：
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
例如：设置 p 元素的 4 个外边距：
p
{
margin:2cm 4cm 3cm 4cm;
}
例1：
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例2：
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例3：
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
padding的定义和用法：
padding 属性设置元素的内边距。
padding 属性定义元素边框与元素内容之间的空间。
该属性可采取 4 个值：
如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。
如果规定三个值，比如 div {padding: 50px 10px 20px} - 上内边距是 50 px，左右内边距是 10 px，下内边距是 20 px。
如果规定四个值，比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px，右内边距是 10 px，下内边距是 20 px，左内边距是 30 px。
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”。