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: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 >OUTPUT:
