html-盒子模型及pading和margin相关

margin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*
        margin 外边距 元素与其他元素的距离（边框以外的距离）
        一个值的时候： 代表四个方向值一样 上右下左（顺时针）
         二个值的时候： 上下  右左
         三个值的时候： 上 右左 下
         四个值的时候： 上  右  下 左
         margin: auto; 快速左右居中
         垂直方向： margin-bottom,margin-top   取两者之间的较大值
         水平方向： margin-left,margin-right   取两者的和
         overflow:hidden; 解决内边距重叠问题
         */
        div{
            width: 300px;
            height: 200px;
            background: antiquewhite;
            /*border: 1px solid red;*/
            /*margin: 50px;*/
            /*margin: auto;*/
            /*display: inline-block;*/
            overflow: hidden;
        }
        .box{
            /*margin-top: 100px;*/
        }
        p{
            width: 50px;
            height: 50px;
            background: aqua;
            /*margin: 100px;*/
            margin: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <div class="box"></div>
</body>
</html>

padding:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         /*
        padding  内边距，边框与内容之间的距离
         一个值的时候： 代表四个方向值一样 上右下左（顺时针）
         二个值的时候： 上下  右左
         三个值的时候： 上 右左 下
         四个值的时候： 上  右  下 左
        */
        div{
            width: 300px;
            height: 200px;
            border: 1px solid red;
            /*padding: 20px;*/
            /*padding-left: 50px;*/
            /*padding-top: 50px;*/
            padding: 50px 0 50px;
        }
    </style>
</head>
<body>
    <div>
        padding  内边距，边框与内容之间的距离
         一个值的时候： 代表四个方向值一样 上右下左（顺时针）
         二个值的时候： 上下  右左
         三个值的时候： 上 右左 下
         四个值的时候： 上  右  下 左
    </div>
</body>
</html>

盒子大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 150px;
            height: 150px;
            background: aqua;
            border: 10px solid red ;
            padding: 20px;
            margin: 50px;
        }
        /*
            盒子大小=样式宽 + 内边距 + 边框
            盒子宽度=左border+右border+width+左padding+右padding
            盒子高度=上border+下border+height+上padding+下padding
        */
    </style>
</head>
<body>
    <div></div>
</body>
</html>