边框:环绕在标签周围的边条
设置边框一:
-连写格式:同时设置4条边框
{border:边框宽度 边框样式 边框颜色;}
{border:5px dashed green;}
-分别设置:可单独设置某一条边的边框
{border-top:边框宽度 边框样式 边框颜色;}
{border-bottom:边框宽度 边框样式 边框颜色;}
{border-left:边框宽度 边框样式 边框颜色;}
{border-right:边框宽度 边框样式 边框颜色;}
边框样式:
solid 实线边框样式
dashed 虚线边框样式
注意:
颜色省略,默认有黑色
样式省略,则无边框
宽度省略,默认有
设置边框二:按照要素来,这三个属性的赋值,是按照上、右、下、左的方式来取值的,不是按照上下左右的方式来赋值。
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
border-width: 10px 10px 10px 10px;
border-style: dashed solid dotted double;
border-color: red orange yellow green;
}
内边距padding:第一个容器都有边框,边框和容器内容的距离就叫内边距,给标签设置内边距后,容器的大小会发生变化。
-内边距格式:有连写和非连写两种
内边距的背景颜色和容器背景颜色一样
注意:在写HTML代码时,有回车行的标签时,回车会被当作一个空格来处理在页面显示一个空格的宽度。
外边距margin:标签与标签之间的距离
-内边距格式:有连写和非连写两种