边框 border

div {            
	/* 1 边框 */            
	width: 300px;            
	height: 200px;            
	/* 1.1 边框粗细 */            
	border-width: 5px;            
	/* 1.2 边框的样子 solid实线边框 dashed虚线边框 dotted点线边框 */            
	/* border-style: solid; */            
	/* border-style: dashed; */            
	border-style: dotted;            
	/* 1.3 边框颜色 */            
	border-color: blueviolet;
            
    /* 边框复合写法 【无顺序】*/            
    border: 5px solid red;            
    /* 边框分开写法 */            
    border-top: 1px solid #000;            
    border-bottom: 1px solid #000;            
    border-right: 1px solid #000;            
    border-left: 1px solid #000;            
    word-wrap:break-word        
}

/* 表格细线边框 */        
table ,        
td ,        
th{            
	border: 1px solid powderblue;            
	/* 合并相邻边框 */            
	border-collapse: collapse;            
	font-size: 14px;        
}

	

内边距padding

/* 内边距：盒子边框和内容之间的距离 */        
div {            
	width: 200px;            
	height: 200px;            
	background-color: pink;            
	/* padding-left: 5px;            padding-top: 5px;            padding-bottom: 5px;            padding-right: 5px; */            
	/* 复合写法 */            
	/* 上下左右都是5像素 */            /* padding: 5px; */            
	/* 上下5像素，左右10像素 */            /* padding: 5px 10px; */            
	/* 3个：上， 左右， 下 */            /* padding: 5px 10px 10px; */
            
        /* 4个：上， 右， 下， 左【顺时针】 */            
        padding: 5px 10px 10px 10px;            
        word-wrap:break-word
        }

外边距margin

div {            
	/* 1.居中显示 */            
	/* 1.1块级盒子水平居中 */            
	width: 200px;            
	height: 200px;            
	background-color: pink;            
	/* auto：自动 */            
	/* margin 上下边距 左右边距 */            
	/* margin: 0 auto; */            
	/* 1.2行内元素，行内块元素 水平对齐 */            
	/* text-align: center; */
}


/* margin简写和padding一样 */

/* 2.解决嵌套块元素外边距合并的问题 */        
.father {            
	width: 400px;            
	height: 400px;            
	background-color: pink;            
	margin-top: 50px;            
	/* 解决办法1：为父元素定义上边框 */            
	/* transparent:透明 */            
	/* border: 1px solid transparent; */            
	/* 解决办法2：为父元素定义内边距 */          


	/* padding: 1px; */            
	/* 解决办法3：为父元素添加overflow：hidden */            
	overflow: hidden;

}
/* 3.清除所有默认内外边距 */        
* {            
 	margin: 0;            
 	padding: 0;        
 }        
 /* 【行内元素尽量只设置左右内外边距】 */