CSS 边距和填充解析和代码示例

CSS边距
CSS边距用于在元素周围创建空间。我们可以为各个边(顶部, 右侧, 底部, 左侧)设置不同的边距大小。
保证金属性可以具有以下值：
1.长度(厘米, 像素, 磅等)
2.元素的宽度％。
3.浏览器计算的保证金：自动。
语法如下：

body{margin: size; }

1.如果margin属性具有4个值：
边距：40px 100px 120px 80px;
1.顶部= 40像素
2.右= 100px
3.底部= 120px
4.左= 80px
例子：

< html > < head > < style > p { margin:80px 100px 50px 80px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < p > Margin properties < / p > < / body > < / html >

Output:

2.如果margin属性具有3个值：
边距：40px 100px 120px;
顶部= 40px
左右= 100px
底部= 120px
例子：

< html > < head > < style > p { margin:80px 50px 100px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < p > Margin properties < / p > < / body > < / html >

OUTPUT:

3.如果margin属性具有2个值：
边距：40px 100px;
顶部和底部= 40像素;
左右= 100px;
例子：

< html > < head > < style > p { margin:100px 150px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < p > Margin properties < / p > < / body > < / html >

OUTPUT:

4.如果margin属性具有1个值：
边距：40px;
上, 右, 下和左= 40px
例子：

< html > < head > < style > p { margin:100px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < p > Margin properties < / p > < / body > < / html >

OUTPUT:

CSS填充
CSS填充用于在任何定义的边界内在元素周围创建空间。我们可以为各个侧面(顶部, 右侧, 底部, 左侧)设置不同的填充。添加边框属性以实现填充属性很重要。
填充属性可以具有以下值：
1.长度(厘米, 像素, 磅等)
2.元素的宽度％。
语法如下：

body{padding: size; }

1.如果padding属性具有4个值：
填充：40px 100px 120px 80px;
顶部= 40px
右= 100px
底部= 120px
左= 80像素
例子：

< html > < head > < style > p { margin:80px 100px 50px 80px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < p > Padding properties < / p > < / body > < / html >

OUTPUT:

2.如果padding属性具有3个值：
填充：40px 100px 120px;
顶部= 40px
左右= 100px
底部= 120px
例子：

< html > < head > < style > p { padding:80px 50px 100px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < p > Padding properties < / p > < / body > < / html >

OUTPUT:

3.如果padding属性具有2个值：
填充：100px 150px;
顶部和底部= 100px;
左右= 150px;
例子：

< html > < head > < style > p { padding: 100px 150px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < p > padding properties < / p > < / body > < / html >

OUTPUT:

【CSS 边距和填充解析和代码示例】4.如果padding属性的值为1：
内边距：100px;
上, 右, 下和左= 100px
例子：

< html > < head > < style > p { padding:100px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < p > Padding properties < / p > < / body > < / html >

OUTPUT:

保证金和填充之间的差异
Margin用于在元素周围创建空间, padding用于在边框内创建元素周围的空间。

文章图片
边距和填充以元素的所有4面为目标。边框和填充也可以在没有border属性的情况下使用。通过以下示例, 区别将更加明显。
例子：

< !DOCTYPE html> < html > < head > < style > h2 { margin:50px; border:70px solid green; padding:80px; } < / style > < / head > < body > < h1 > lsbin < / h1 > < h2 > Padding properties < / h2 > < / body > < / html >