1.内边距 padding 、外边距margin

最新推荐文章于 2023-07-26 10:42:35 发布

小杯i

最新推荐文章于 2023-07-26 10:42:35 发布

阅读量385

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/m0_72597622/article/details/126990829

版权

CSSpadding（内边距）属性，定义元素边框与元素内容之间的空间。 padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

1.1、单个方向设置

12、取值

.box{
    width:200px;
    background-color:red;
    padding-left:10px;
    padding-right:20px;
    padding-top:30px;
    padding-bottom:40px;
}

1.3、简写

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

语法：padding：1-4个值【空格隔开】
规则：
- 1个值：表示【四个方向】的内边距值
- 2个值：分别表示【上下，左右】的内边距值
- 3个值：分别表示【上，左右，下】的内边距值
- 4个值：分别表示【上，右，下、左】的内边距值

.box{
    width:200px;
    background-color:red;
    
    padding:10px 20px 30px 40px;
}

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

2.1、单个方向定义

.box{
    width:200px;
    background-color:red;
    
    margin-left:10px;
    margin-right:20px;
    margin-top:30px;
    margin-bottom:40px;
}

2.2、简写

.box{
    width:200px;
    background-color:red;
    margin:10px 20px 30px 40px;
}

2.3、外边距应用

外边距实现已知宽度的块级盒子水平居中。

关注