04.盒子模型-内边距

2022-06-11 09:33:49 阅读：152 来源： 互联网

标签：盒子 04 100px padding width 内边 10px 20px

<!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>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;
            border:10px orange solid;

            /* 
                内边距（padding）
                    -内容区和边框之间的距离是内边框
                    -一共有四个方向的内边距：
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left

                    -内边距的设置会影响到盒子的大小                    
                    -背景颜色会延伸到内边距上

                一个盒子的可见框的大小，由内容区、内边距和边框共同决定
                    所以在计算盒子大小时，需要将这三个区域加到一起计算

            */
            padding-top:100px;
            padding-right:100px;
            padding-bottom:100px;
            padding-left:100px;

            /* 
                padding 内边距的简写属性，可以同时指定四个方向的内边距
                    规则和border-width一样
            */
            padding:10px 20px 30px 40px;
            padding:10px 20px 30px;
            padding:10px 20px;
            padding:10px;
        }

        .inner{
            width:100%;
            height:100%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
</html>

标签：盒子,04,100px,padding,width,内边,10px,20px
来源： https://www.cnblogs.com/sherryyuan/p/16365262.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

04.盒子模型-内边距