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

2021年3月9日16:24:33 发表评论 368 次浏览

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:

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

边距和填充以元素的所有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:

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: