盒子模型-margin,padding

「宽」width: 确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。 <长度> | <百分比> | <auto> 

 

「高」height: 确定盒子本身的高度。<长度> | <百分比> | <auto> 

 

「边距」margin: 控制围绕边框的边距大小，外补。控制标签本身与父标签之间的距离。如果提供全部四个参数值，将按上－>右－>下－>左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－>下，第二个用于左－>右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 

    margin-top: 控制上边距的宽度

    margin-right: 控制右边距的宽度

    margin-bottom: 控制下边距的宽度

    margin- left: 控制左边距的宽度

    各种写法：

        margin:10px;

        margin:10px   20px   30px    40px;

               top    right  bottom  left

        margin:10px         20px;

               top/bottom   left/right

        margin:10px auto; --- auto：自动计算左右外边距=(页面-div)/2 -- 实现框居中显示

    源码：

    <div style="width:250px;height:250px;margin:10px auto;">

        <div style="width:180px;height:180px;margin-top:20px;margin-left:20px;">

        </div>

    </div>

    效果图：

    



 

 

「补白」padding: 确定围绕块元素的空白填充，内补。取值只能是长度，不能使用auto。控制标签本身与子元素之间的距离，会扩大标签本身的大小。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 

    padding-top: 控制上留白的宽度

    padding-right: 控制右留白的宽度

    padding-bottom: 控制下留白宽度

    padding-left: 控制左留白的宽度

    源码：

    <div style="width:250px;height:250px;margin:10px auto;">

        <div style="width:180px;height:180px;margin-top:20px;margin-left:20px;padding-top:20px;padding-left:20px;">

        <div style="width:100px;height:100px"></div>

        </div>

    </div>

    效果图：

    



 



大小: 2.8 KB



大小: 3.8 KB

查看图片附件