内边距(padding)

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

值的个数

表达意思

1个值

padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素

2个值

padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素

3个值

padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素

4个值

padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

padding: 20px;上下左右都是20 (一个值)

padding: 5px 1px; 上下 左右 (两个值)

padding: 6px 3px 2px; 上 左右 下 ( 三个值)

padding: 10px 20px 30px 40px; 上 右 下 左(四个值)

外边距(margin)

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。

盒子必须指定了宽度(width)

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

margin: 20px auto;

插入图片和背景图片

Document

div {

height: 100px;

width: 300px;

border: 1px solid red;

text-align: center;

margin: 10px auto;

}

section {

width: 300px;

height: 300px;

border: 1px solid #000;

}

section img { /* 插入图片更改大小 width 和 height */

width: 200px;

height: 210px;

margin-top: 30px;

margin-left: 50px; /* 插入图片更改位置，用margin 和padding */

}

aside {

width: 400px;

height: 400px;

border: 1px solid blue;

background: #fff url(images/b2.jpg) 30px 50px no-repeat;/* 更改位置用background-position */

background-size: 200px 210px;/* 背景图片更改大小只能用background-size */

}

一般情况下，背景图片适合做些小图标

产品展示的就用插入图片

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {

padding:0; /* 清除内边距 */

margin:0; /* 清除外边距 */

}

注意： 行内元素是只有左右内外边距的，是没有上下内外边距的。

所以我们尽量不要给行内元素指定上下内外边距。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。。

div {

width: 100px;

height: 100px;

background-color: red;

}

div:first-child {

margin-bottom: 100px;

}

div:last-child {

background-color: green;

margin-top: 50px;

}

/* 外边距合并 垂直块级的盒子，以最大外边距为准 */

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决：

可以为父元素定义1像素的上边框或上内边距。

可以为父元素添加overflow:hidden。