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用于在边框内创建元素周围的空间。
![Margin Padding Border](https://www.lsbin.com/wp-content/uploads/2021/03/cssmarginandpadding.png)
边距和填充以元素的所有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: