box model(盒子模型)

1.frame(边框)

2.padding(内边距)

内容区和边框之间的距离是内边距,一共有四个方向的内边距

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

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

    html
    
    <html>
        <head>
            <meta charset="UTF-8">
            <title>i am box model paddingtitle>
            <style>
                .box1{
                    width:200px;
                    height:200px;
                    background-color:#bfa;
                    border: 10px orange solid;
                    
    	                padding-top:100px;
    	                padding-right:100px;
    	                padding-left:100px;
    	                padding-bottom:100px;
    
                }
    
                .inner{
                    width:100%;
                    height:100%;
                    background-color:yellow;
                }
    
            style>
        head>
    
        <body>
            <div class="box1">
                <div class="inner">div>
            div>
        body>
    html>
    

    box model(盒子模型)_第1张图片
    黄色区域是内容区(inner),绿色区域是内边距。

    padding 的简写属性,可以同时制定四个方向的内边距 规则和 border-width 一样。

    1. 四个值:上 右 下 左
    2. 三个值: 上 左右 下
    3. 两个值: 上下 左右
    4. 一个值:上下左右

    3.外边距

    1. margin-top:100px; 的效果

    设置一个正值,元素会向下移动

    box model(盒子模型)_第2张图片

    1. margin-left : 100px;

    设置一个正值,元素会向右移动
    box model(盒子模型)_第3张图片

    元素在页面中是按照自左向右的顺序排列的默认情况下,如果设置左和上外边距,则会移动元素自身而设置下和右,会移动其他元素.

    1. margin-bottom : 100px;

    box model(盒子模型)_第4张图片
    margin 简写属性:
    可以同时设置四个方向的外边距,用法和 padding 一样
    margin : 100px ; 的效果如下图所示。

    当 margin 为正值时,可以理解为外边距是以某边为起点向外扩张,不过一般情况下 margin-right 没有效果
    box model(盒子模型)_第5张图片

    你可能感兴趣的:(CSS+HTML5,css,css3,html)