简单介绍margin与padding的用法

最新推荐文章于 2023-03-06 21:43:02 发布

shuaileilei_

最新推荐文章于 2023-03-06 21:43:02 发布

阅读量886

点赞数 1

文章标签： html5 css3

本文链接：https://blog.youkuaiyun.com/shuaileilei_/article/details/104470503

版权

本文详细介绍了CSS中margin与padding的使用方法，包括它们的基本写法、如何指定方向以及注意事项。通过实例展示了如何利用这两个属性调整元素的内外边距，实现精确的布局控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单介绍margin与padding的用法

margin与padding是我们经常用到的最基础的俩大属性了，接下来为大家介绍一下margin与padding的用法。

1. margin与padding的写法

 padding : 内填充（内边距）
        写了一个值 : 30px  ( 上右下左 )
        写了二个值 : 30px 40px ( 上下 左右 )
        写了三个值 : 30px 40px 50px( 上 左右 下)
        写了四个值 : 30px 40px 50px 60px ( 上  右  下  左)
 指定方向
        padding-left : 30px
        padding-right : 30px
        padding-top : 30px
        padding-bottom : 30px
 
    margin : 外边距 
        写了一个值 : 30px  ( 上右下左 )
        写了二个值 : 30px 40px ( 上下 左右 )
        写了三个值 : 30px 40px 50px( 上 左右 下)
        写了四个值 : 30px 40px 50px 60px ( 上  右  下  左)
  指定方向
        margin-left : 30px
        margin-right : 30px
        margin-top : 30px
        margin-bottom : 30px
        
注意 ：    padding不能出现负值，margin是可以出现负值。

我们先创建一个红色的200×200像素的div盒子，取名为box1，然后在里面再建立一个蓝色的200×200的盒子，取名box2。

html源代码

   <div id="box1">我是盒子1</div>
   <div id="box2">我是盒子2</div>

css代码

		#box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

此时运行如下
在这里插入图片描述

然后我们给box1加下margin（margin-bottom : 30px）

CSS代码如下

 #box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom : 30px
        }

此时的运行如下
在这里插入图片描述

此时两个盒子之间的间距就变成了30px

然后我们给box1加padding（ padding-left : 100px；）给box2也加上padding（ padding-top : 100px；）

在这里插入图片描述

因为div添加了内边距（padding）属性，div的实际宽度=div的初始固定值+边距值（高度同理）
例如我们将div设定为宽度为200px，添加100px的左边的内边距，该Div的最后宽度为200＋100=300px（高度同理）

所以如果需要给固定div添加内边距，想要它不撑开，就将固定值设置为想要得到的宽度值与边距值之差。所以我们将box1的宽高设置为100×200px，将box2的宽高设置为200×100px
CSS代码

#box1{
            width: 100px;
            height: 200px;
            background-color: red;
            padding-left: 100px;
            margin-bottom : 30px
            
        }
        #box2{
            width: 200px;
            height: 100px;
            background-color: blue;
            padding-top: 100px;
        }

然后就变成我们想要的200×200的盒子了
在这里插入图片描述