html中div的外边距和内边距都是什么意思，怎么设置

内边距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%

}

内边距处于父元素和子元素之间，设置在父元素上，可以理解成物品和盒子中间塞的那层泡沫塑料，使用padding属性。

padding后面可跟多个值，中间用空格分离，含义如下：

我们放置一个宽高为200px的红色大盒子，其中包着一个宽高为100px的粉色小盒子。

我们给大盒子设置一个内边距为50px。

我们会发现给父元素设置了一条左内边距后，它的宽度也被撑大了，这显然不是我们想要的效果，解决方法就是如果加了左内边距，就把父元素宽度缩小相应长度，比如我们刚刚增加了50px的左内边距，就把父元素宽度从200px变为150px，就能达到效果啦，其它方向也是一样的，比如加了上内边距就缩小高度。

下图就可以理解成一个盒子里面套了一个列表，中间有内边距：

我们再来看下面这个图案，由三个盒子和内边距绘制而成。

（盒子就可以替换成其它各种块元素，比如上图里面就是列表）

html：

css：

可以看到我省略了很多宽高。

（1）由于块元素默认宽度占一整行，高度由内容撑开，我们很多时候可以只给最外面的元素设置宽度，最内部的元素设置高度，其它省略，也能达到效果。

如图3-2-1中，我们只需要提供每个列表元素<li>的高度和外面大盒子的宽度即可，其它用内边距撑起或挤出。

（2）最终的高度和内部元素的宽度都是由最外元素宽度、最内元素高度和所有内边距撑起或者挤出来的。

如图3-3-2中：

中间橙色盒子的宽度=红色大盒子的宽度-红色大盒子的左右内边距

红色大盒子的高度=黄色小盒子的高度+橙色中盒子的上下内边距+红色大盒子的上下内边距。

以上 *** 作仅针对块元素，对于内联元素， 左右内边距 是可以 正常使用 的，而 上下内边距 只能 延伸背景颜色 ，并不会把子元素挤到中间。

如图所示，选中文本框，右键-设置形状格式，打开“设置形状格式”对话框。

如图所示，左侧单击“文本框”，右侧根据需要调整“内部边距”的“上、下、左、右”的设置值，单击关闭按钮关闭对话框，完成设置。

---