------------恢复内容开始------------
一、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;