Padding

一.padding--内边距

1.padding和margin属性值上差别在于没有auto选项,二者都有单边赋值xx-top|right|bottom|left
2.padding是有颜色的,background-color将填充所有border以内的区域
3.如果是两个值,则第一个值表示上下、第二个表示左右;
如果是三个值,则第一个表示上,第二个是左右,第三个是下;
如果是四个值,按顺时针赋值
4.一般不设置宽,用padding撑开盒子,更适合开发。注意0PX也是有意义的

二、padding不额外撑开盒子的情况

大div盒子包一个小div盒子,因为宽度不给予的情况下,默认和父亲一样宽,所以在只设高度的情况下,添加padding/border,只撑开了高,没有撑开宽度。但如果padding值超过了父亲宽度,则依旧会超过父盒子。所以通栏的盒子一般不写宽度

<style>
.box{
    width:200px;
    height:200px;
    background-color:pink;
    }
    .box1{

    background-color:red;
    padding:10px;
    }
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
 </div>
</body>

三.清除默认padding

<!--一些元素,默认带有padding-->
  <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容