内边距（padding）与外边距（margin）参考教程：内边距（padding）与外边距（margin） - CSS

参考教程：内边距（padding）与外边距（margin） - CSS 入门 - 课程资料 - 长乐未央 (clwy.cn)

1.这部分是CSS的我为什么写这个呢，有时候真的会迷糊，所以写下来的了

2.写代码吧，说实话端午节还更新好累，我朋友端午节还加班真羡慕（因为有钱啊，公司对他贼好）

padding（内边距）

就小王的网站来做比喻吧

看这个二维码橙色颜色背景+二维码（下面的文字就忽略了，后续在搞吧）

1.代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部css -->
    <!-- <link rel="stylesheet" type="text/css" href="文件名"> -->


    <!-- 内部css -->
    <style>
        /* .ewm .是类  ewm 是名 */


        .ewm {          
            border: 2px solid #f8a60e;
            float: left;
            /* 左浮动 */
            padding: 5px;
            /* 92-84  10px 左右边距 */
            /* 91-87   4px上 */
            
        }
        
    </style>
</head>
<body>
    <div class="ewm">
        <img src="./Snipaste_2023-06-22_23-41-05.png" alt="">
    </div>
</body>
</html>

最后才发现这个是精灵图难受

有四个方向的分别是

padding-top: 20px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 80px;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部css -->
    <!-- <link rel="stylesheet" type="text/css" href="文件名"> -->


    <!-- 内部css -->
    <style>
        /* .ewm .是类  ewm 是名 */


        .ewm {          
            border: 2px solid #f8a60e;
            float: left;
            /* 左浮动 */
            /* padding: 5px; */

            /* 顶部 */
            padding-top: 4px;
            padding-right: 10px;
            /* 底部 */
            padding-bottom: 52px;
            padding-left: 10px;
            /* 92-84  10px 左右边距 */
            /* 91-87   4px上 */
            /* 301-248  52下 */
            
        }
        
    </style>
</head>
<body>
    <div class="ewm">
        <img src="./Snipaste_2023-06-22_23-41-05.png" alt="">
    </div>
</body>
</html>

3.padding缩写大法

            /* 上右下左   顺时针 */
            padding: 4px 10px 10px 52px;

            /* 两个值  上下 左右*/
            /* padding: 20px 50px; */

三个值就留给你思考了

margin（外边距）

两张照片的距离就是外边距

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="zp">
        <!-- 72-58=14 -->

        <img src="./1.jpg" alt="">

        <img src="./2.png" alt="">

        <img src="./3.jpg" alt="">

    </div>
    
</body>
</html>

img {
    margin: 14px;
}

如果每个方向的外边距不一样，你可以一个个方向的写。当然一样也可以用刚才介绍的缩写大法，还是按照顺时针的上右下左来书写。