在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。

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整个被拉了下来，布局错乱。

1、padding-top 属性：设置 p 元素的上内边距，该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。

2、padding-right 属性：设置元素右内边距（空白）。该属性设置元素右内边距的宽度。行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现

3、padding-bottom 属性：设置元素的下内边距（底部空白）。该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。

4、padding-left 属性：设置元素左内边距（空白）。该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现

5、margin 属性：在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

参考资料来源：百度百科-CSS外边距

参考资料来源：百度百科-CSS内边距

margin是设置元素与元素之间的间距的；

块元素就是会占一行的元素，行内元素是跟据内容的多少来占位置的，而浮动元素是也是跟据内容的多少来占位置的，但是浮动之后就会变成块元素了，并且会从正常的文档流中删除它的位置；

块元素可以设置margin的上、右、下、左间距，行内容只有margin的左和右会生效，浮动元素的margin跟块元素一样

LayoutParams的leftMargin属性是什么意思 - 已解决 - 搜狗问问

3个回答 - 最新回答: 2014年1月15日

最佳答案: 每一个元素都看作一个矩形的话，leftMargin就是本元素的矩形与左侧元素的矩形的间隔

请采纳

如果你认可我的回答，敬请及时采纳，

~如果你认可我的回答，请及时点击采纳为满意回答按钮

~~手机提问的朋友在客户端右上角评价点满意即可。

~你的采纳是我前进的动力

~~O(∩_∩)O，记得好评和采纳，互相帮助

以上就是关于在html中margin跟padding是什么意思全部的内容，包括:在html中margin跟padding是什么意思、margin和padding、html所有关于内边距外边距的标签属性等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！