内边距，外边距，内阴影

最新推荐文章于 2024-07-12 16:55:56 发布

cu4

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量93

点赞数

分类专栏：内外边距盒子阴影文章标签：前端 css

本文链接：https://blog.csdn.net/wuwei_19981001/article/details/127656443

版权

内外边距同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

盒子阴影

1 篇文章 0 订阅

订阅专栏

shan一、内边距

（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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 400px;
            border: 1px solid red;
            margin: 100px auto;

        }
    </style>
</head>
<body>
    <p>
        手工剪纸、手抄报活动中，大家通力合作，用心完成了一 件件带有二十大元
        索的手工作品，表达出对党的崇敬、对祖国的热爱和永远跟党走”的坚定决
        心。活动的开展进一 步提升了大家的动手能力，增强了团队凝聚力;党的二十大
        精神知识竞赛答题活动中，项目部积极调动支部党员、项目员工参加竞赛活动，
        迅速在项目。上下掀起了学习热潮。本次活动将教育性和趣味性融为一体，加深了
        全体职工对党的二+大精神的理解:专题党课环节，党支部书记为大家讲授了
        学习二十大会议精神，推进精神落实落地”专题党课，强调费坚持中国共产党
        领导，在工作中勇于创新，不断促进国家创新领域的发展，不断推动项目数字化
        平台应用，为推动数字化中国发展作出贡献。
    </p>
</body>
</html>

一个值代表4个方向

padding: 10px;

两个值代表：上下右左方向

padding: 10px 30px;

三个值代表：上右左下方向

padding:10px 30px 40px;

四个值代表：上右下左方向

padding:10px 30px 40px 60px;

（2）内边距会撑大盒子的总宽度可以设置盒子尺寸属性来调整宽度

（3）总体尺寸没变化

box-sizing: border-box;

二、外边距

代码图：

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 200px;
            height: 100px;
        }

        div:nth-of-type(1) {
            background-color: red;
            margin-bottom: 15px;
        }
        div:nth-of-type(2) {
            background-color: green;
            margin-top:20px;
        }
        p{
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <!-- 上下关系的外边距不会叠加  以大的为准 -->
    <div></div>
    <div></div>
    <!-- 左右关系的外边距会叠加 -->
    <!-- <br> -->
    <p>
        <a href="">我们是a标签</a>
        <a href="">我们是a标签</a>
        <span>我们是span标签</span>
    </p>
    
</body>

</html>

div:nth-of-type(1){
                    background-color:red;
                    margin-bottom:15px;
                  }
div:nth-of-type(1){
                    background-color:green;
                    margin-bottom:20px;
                  }

上下关系的外边距不会叠加，以大的为准。

左右关系的外边距会叠加。

行标签是能待在同一行不能设置宽高属性的标签 a span i em s del

将行标签转换为行内块，就可设置高度，宽度

三、盒子阴影

<!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>
    <style>
        span{
            display:inline-block;
            width: 600px;
            height: 400px;
            background-color: blue;
            box-shadow:inset 5px 5px 10px aqua;}
    </style>

</head>
<body>
    <span></span>
    <span></span>
</body>
</html>

inset设置内阴影

box-shadow:5px 5px 10px aqua;依次是左右上下模糊度颜色