在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右外边距和左外边距是 5pxpadding的定义和用法：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。

1.所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。

当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。

<style>

.injected-text {

margin-bottom: -25px

text-align: center

}

.box {

border-style: solid

border-color: black

border-width: 5px

text-align: center

}

.yellow-box {

background-color: yellow

padding: 10px

}

.red-box {

background-color: red

padding: 20px

}

.green-box {

background-color: green

padding: 10px

}

</style>

<h5 class="injected-text">margin</h5>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

2.元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离

3.如果你将一个元素的 margin 设置为负值，元素将会变大。

4.有时你想要自定义元素，使它的每一个边具有不同的 padding。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding

<style>

.green-box {

background-color: green

padding-top: 40px

padding-right: 20px

padding-bottom: 20px

padding-left: 40px

}

</style>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

5.有时你想要自定义元素，使它的每一个边具有不同的 margin。

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。

<style>

.green-box {

background-color: green

margin-top: 40px

margin-left: 40px

margin-right: 20px

margin-bottom: 20px

}

</style>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

6.除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

<style>

.red-box {

background-color: red

padding: 20px 40px 20px 40px

}

</style>

7.除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：

margin: 10px 20px 10px 20px

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左

<style>

.red-box {

background-color: red

margin: 20px 40px 20px 40px

}

</style>

内边距padding的意思是： 边框与内容之间的距离。

外边距margin的意思是：边框与边框之间的距离。

拓展资料

外边距margin

左边距 margin-left:数值 | autoauto:即距离这个边最远的距离；

右边距: margin-right:数值 | auto；

上边距: margin-top:数值  ，这里不能用auto；

下边距: margin-bottom:数值 这里也不能用auto；

外边距的复合写法

1、margin: 0px(上) 0px(右) 0px(下) 0px(左)；

2、margin: 0px(上) 0px(左右) 0px(下)；

3、margin: 0px(上下边距) 0px(左右边距)；

4、margin: 0px(上下左右边距都是0px)；

例子：

内边距padding

padding属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值，例如：

h1 {padding: 10px 0.25em 2ex 20%}

内边距也通过使用下面四个单独的属性，分别设置上、右、下、左内边距

padding-top 上内边距；

padding-right 右内边距；

padding-bottom 下内边距；

padding-left 左内边距；

例如：

h1 {

padding-top: 10px

padding-right: 0.25em

padding-bottom: 2ex

padding-left: 20%

}

---