盒子属性 padding、border、margin

------------恢复内容开始------------

一、padding 内边距,盒子边框到内容的距离

            /*表示内边距到内容的上左下右距离*/
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
            padding-right: 50px;

            /*一个参数表示上下左右都为20px*/
            padding:20px;

            /*两个参数表示上下距离20px 左右距离40px*/
            padding: 20px 40px;

            /*三个参数表示上20px，左右各30px，下40px*/
            padding: 20px 30px 40px;
            /*四个参数表示上20px，右30px，下40px，左50px*/
            padding: 20px 30px 40px 50px;

 

二、border 外边框

1、按照三要素来编写border：粗细width、样式style、颜色color

            /*上下外边距4px，左右外边距10px*/
            border-width: 4px,10px;
            /*样式：上横线，右圆点，下双横线，左虚线*/
            border-style: solid dotted double dashed;
            /*颜色：上绿，右红，下紫，左黄*/
            border-color: green red purple yellow;

2、按照方向来编写

            /*设置上方向的粗细、样式、颜色*/
            border-top-width: 4px;
            border-top-style: solid;
            border-top-color: red;
            /*设置下方向的粗细、样式、颜色*/
            border-bottom-width: 5px;
            border-bottom-style: solid;
            border-bottom-color: blue;

3、清除样式，通常应用于input输入框

        input{
            /*清除默认样式*/
            border:0;
            /*清除点击时的外线*/
            outline: none;
        }
        /*清除默认样式后，重新设置个人样式*/
        .username{
            width: 180px;
            height: 40px;
            font-size: 20px;
            padding-left: 10px;
            border:1px solid #666;
        }
        .username:hover{
            border:1px solid orange;
        }

 

 

三、margin 外边距，盒子与盒子间的距离

左右方向外边距会合并，以下表示两个盒子左右相隔120px

margin-right: 20px;

margin-left: 100px;

 

上下方向上会出现外边距合并（外边距塌陷）的情况，以下表示两个盒子上下方向相隔100px

margin-bottom: 30px;

margin-top:100px;