padding和margin(padding和margin可以为负数吗)

margin和padding

ps：如果想要深入了解css盒模型，可以去 w3cSchool 找到关于盒模型的详细概述，这里只会简单的介绍部分盒模型相关的知识

这是一个元素的盒模型展示，几乎所有元素都是使用这种盒模型构成的，盒模型分四个部分，从里到外分别为 element(元素) 、 padding(内边距) 、 border(边框) ， margin(外边距)

写在双闭合标签里面的内容通常会显示在元素的element部分，也就是内容区。

页面中的显示效果为：

如果我在div内部再加一个图片，则div的内容区域被继续撑开：

呈现效果为：

padding不会占据元素的内容区域，但是它会扩展一个元素的内部区域，可以打一个比方，我们每个人本身就好比是一个元素的element，而你身上穿的衣服就好比是元素的padding部分，你的衣服既是你又不是你本身，别人在找你的时候如果碰到你的衣服你可以感觉到是有人触碰了你，但是你的身体本身并不会延伸到衣服的内部

还是使用上面的那个div，我们现在给这个div加上一个padding，在这之前为了方便观察，我们先给这个div加上一个背景颜色和宽度，

现在呈现出来的效果：

我们可以看到，现在文字和图片还是在这个元素的底部的，我们现在给他加上一个50px的padding

其中蓝色部分是element，也就是元素的内容区，400 * 125代表了我们设置了400px的宽度，里面的图片高度是125px，内容区被撑开，所以此时元素的内容区是400 * 125像素的大小，然后往外看，padding有4个50，这是代表了这个元素在上下左右四个方向上的padding都是50像素，此时我们整个元素的占位宽度就是400+50+50=500px，高度则是125+50+50=225像素，所以但是由于元素内容的部分不能延伸到padding区域，所以上面的文字和图片还是都在元素本身的内容区，不会随着元素尺寸被padding撑大而向外扩展。

再回到这张图片

现在我们有一个a标签构成的超级链接，点击这个a标签可以跳转到对应的页面，但是有的时候在页面中文字可能比较小，如果只有在点击到文字上时才能跳转的话会影响用户体验，所以我们要让a标签的点击区域变大，有两种方式可以解决这个问题：

为了方便观察，我们同时给他一个背景色

这时，我们由于扩大了a标签的宽度和高度，所以整个绿色的区域都是a标签的范围，自然都可以实现点击效果。

上面那种方式可以实现大多数需求，但是现在还有一个问题，就是当a标签的可点击范围不固定时，或者由于种种问题我们不能给a标签转成块级元素时，上面那种方法就不生效，比如下面这种场景：

这是一个通常网页中常见的菜单栏，现在我有一个需求，就是需要给被点击超级链接加大尺寸方便点击，同时加一个统一的背景颜色，以便于让用户区分哪些是可以被点击的区域。

按照上面的那种方式，我们可以这样设置

呈现的效果是

这时如果我们想要给文字居中还需要设置两个样式：

然后出来的效果是这样的：

这时我们已经达到了我们所需要的效果，但是还有一种情况，就是当列表内的文字长短不一时，这种方式就会出现问题：

边框的使用没有什么好说的，只有几个主要注意的地方：

其中1、2比较容易理解，下面解释一下第3点。

我们在做页面的时候，有的时候会使用这样的特效：

这两种效果最大的区别在于2比1多了一个过渡的效果。

按照没有过渡效果的border（以下简称效果1）的思路，转变成有过渡效果的border（简称效果2）应该只需要加一个 transition 作过渡动画就可以了，但实际上如果我们只是在效果1的基础上加了一个 transition 的话则会出现这样的效果：

在初学css时，margin和padding最容易混淆，实际上我们只需要注意两者最大的区别就可以，那就是 padding 可以延伸 background 的属性，主要是 background-color 和 backgound-image ，而 margin 不会延伸这些属性。

我在这里写了两个div，给他们加了同样的宽度并分别加了背景颜色，同时给div1加了几个文字内容，由于块级元素的特性，他们分别处于两排。

现在我给div1设置50px的padding

可以看到，现在div1的元素本身被撑大了，现在div1的高应该是50 + 200 + 50 = 300px

同样，由于上面提到的padding的特性，所以文字依然是在内容区，没有进入padding的部分。

此时我们可以看到，div1的整体尺寸被放大了，同时背景颜色延伸到padding的范围。

现在我再给div1设置5px的border

这时div1的整体高度应该是5 + 50 + 200 + 50 + 5 = 310px

然后再设置20px的margin：

我们先不用管其他方向，先看下面，也就是div1和div2交接的地方。

在这里我们可以看到div1和div2之间有20px的间距，这一部分就是div1的margin，而且和padding最大的区别是这一部分没有延伸div1的背景色和内容区域，同时也没有让div的元素尺寸发生改变

因此我们可以这样理解

这里看完了，我们现在再回头看margin右侧的问题

我们可以发现，Chrome在审核元素时会自动将对应部位改变颜色，在右侧鼠标放在对应的位置时，左侧的元素也会实时响应出对应位置，如图所示，在element、padding、border时显示均正常，margin时上、左、下三个方向也没有问题，唯独右侧会比我设置的margin要大得多（ margin:20px ），这是因为块级元素独占一行的特性，让他在自己元素本身同行的位置会有默认的 margin:auto; ，即 同行下所有元素没有占的位置均为这个元素的margin ，这也是块级元素不能和其他元素同行的原因。

元素的盒模型会有各种各样特殊的问题，下面举几个常见的例子以及经常出现的问题和解决方式：

我们在布局时，由于元素的高度通常为后台提供，所以前端页面的部分通常不会给固定的高度以免结构混乱，所以我们在布局时需要灵活运用padding和清浮动。

上面一个div内部有一个ul无序列表，div上下均距离ul有一定的距离。

在我们写静态页面时无序列表的数量可能是固定的（4个），但是js加载时通常数量不固定，可能少于4个也有可能更多，这时如果我们给一个固定的高度则会出现内容溢出的问题

所以这里我们需要给div设置上下相等的padding，而不是固定高度。

在HTML中，一个元素内部的第一个子元素如果有margin-top的话即会将子元素的margin-top赋给父元素：

如图所示，我在元素中给h1设置了margin-top，但是h1的margin-top并没有生效，而是传递给了它的父元素div，导致div整个被拉了下来，布局错乱。

怎样区分margin和padding

我们在进行网页制作时都会遇到为元素设定边距的情况，边距又分为内边距和外边距，即margin和padding.

查看元素的margin和padding我们需要借助Dreamweaver软件和火狐浏览器中的firebug插件。

margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而pdding是内边距，是盒子的边与盒子内部元素的距离。

我们使用firebug查看html，当鼠标点击到相应的代码时，网页中的相应元素会变成蓝色，紧挨着的紫色元素是padding，

蓝色部分旁边的黄色部分是元素的margin值，在元素上方是margin-top，下方是margin-bottom,左边margin-left,右边margin-right。

6

我们还可以借助于firebug的“布局”选项查看各个元素的内外边框。也就是上面几张图的来源，我们打开一个网页，按下f12，在firebug中查看，然后鼠标选定html中的某个元素，点击右侧的布局。

7

这样我们看到的一个方框，方框中注明了外边距是多少，内边距是多少。

END

padding与margin区别

padding与margin区是：意思不同，用法、词源不同，侧重点不同

一、意思不同

1、padding的意思是：衬料；衬垫； 赘语； 废话；凑篇幅的文字； (用软材料)填充，覆盖，保护；蹑手蹑脚地走；虚报(账目)； 做黑账

例句：

The shoe has?padding?around the collar, heel and tongue for added?comfort.

鞋子的鞋帮、鞋跟和鞋舌部位都有衬垫，以增加舒适度。

2、margin的意思是：边缘；余地；幅度；利润；差额；页边空白；定金；【商】原价和卖价之差； 加边于；为…付保证金

例句：

We came to the margin of the wood.

我们来到树林的边缘。

二、用法、词源不同

1、padding：pad的现在分词，用作名词、动词。用作及物动词时，意思是“填塞”，即“加垫子于； 填料于”，引申可作“拉长”解，接名词或代词作宾语。1554年进入英语，直接源自低地德语的pad，意为鞋底。

2、margin：用作名词、及物动词。14世纪中期进入英语，直接源自古典拉丁语的margo，意为边缘的mereg，意为边缘，分界线。

三、侧重点不同

1、padding：侧重于指内边距。

2、margin：侧重于指外边距。

padding和margin的区别是什么？

主要是性质上的不同：

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

语法结构

（1）padding-left:10px; /margin-left:10px;　? 左内/外边距

（2）padding-right:10px; /margin-right:10px;?右内/外边距

（3）padding-top:10px; /margin-top:10px;?? ?上内/外边距

（4）padding-bottom:10px; /margin-bottom:10px;? ? ? ? ? ?下内/外边距

（5）padding：10px;/ margin:10px;?? ? ? ? ? ? ? ? ? ? ? ? ?四边统一内/外边距

（6）padding:10px 20px; /margin:10px 20px;??上下、左右内/外边距

（7）padding:10px 20px 30px;/margin:10px 20px 30px;?? ? ?上、左右、下内/外边距

（8）padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左内/外边距

margin和padding的区别

margin是外边距，是指元素边界之外的距离，不占据元素的空间。设置的值是元素盒子模型边界开始到外部的距离值。

padding是内边距，是包含在元素内部的距离，占据元素内部的空间。

最主要的区别就是一个是外，一个是内。