html给页面整体添加左右边距_css控制边界与边框示例(内边距、外边距使用方法)...

一、CSS控制边界

1、内边距

padding(内边距也叫内填充)

padding-bottom 长度/百分比 元件下端边线的空隙

padding-left 长度/百分比 元件左端边线的空隙

padding-right 长度/百分比 元件右端边线的空隙

padding-top 长度/百分比 元件上端边线的空隙

简易写法：

padding:10px 一个值表示同时控制四个方向

padding:2px 4px  两个值表示第一个值控制上下 第二个值控制左右

padding:2px 6px 10px 三个值表示第一个值控制上 第二个值控制右和左 第三个值控制下 左边找右边

padding:1px 2px 3px 4px  四个值表示每个值单独控制上右下左

2、外边距

margin(外边界) 属性介绍

margin-bottom auto 自动调整空隙 长度/百分比 设置下端空隙

margin-left auto 自动调整空隙 长度/百分比 设置左端空隙

margin-right auto 自动调整空隙 长度/百分比 设置右端空隙

margin-top auto 自动调整空隙  长度/百分比 设置上端空隙

简化方案：

margin:2px 4px

margin:2px 6px 10px

margin:1px 2px 3px 4px

复制代码代码如下:

div{

width:200px;

height:200px;

background-color:#0F0;

margin:100px;

padding:10px;

}

body{