padding：就是內邊距的意思，它是邊框到內容之間的距離
另外padding的區域是有背景顏色的。並且背景顏色和內容區域的顏色一樣。也就是說background-color這個屬性將填充所有的border以內的區域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box{ width: 300px; height: 300px; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容 </div> </body> </html>
加上padding屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box{ width: 300px; height: 300px; padding: 20px; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容 </div> </body> </html>
加上background-coloor屬性 背景顏色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box{ width: 300px; height: 300px; padding: 20px; background-color: red; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容 </div> </body> </html>
padding有四個方向.所以說我們能分別描述4個方向的padding
方法有兩種：1.寫小屬性 2.寫綜合屬性 用空格隔開
1.小屬性，分別設置不同方向的padding
涉及單個方向padding使用
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
2.寫綜合屬性 用空格隔開 推薦使用
(1) 上 右 下 左
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box{ width: 300px; height: 300px; padding: 20px 30px 40px 50px; border: 10px solid red; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容 </div> </body> </html>
(2) 上 左右 下
/*上 左右 下*/
padding: 20px 30px 40px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box{ width: 300px; height: 300px; /* 上 左右 下 */ padding: 20px 30px 40px ; border: 10px solid red; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容 </div> </body> </html>
(3) 上下 左右
/* 上下 左右*/
padding: 20px 30px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box{ width: 300px; height: 300px; /* 上下 左右 */ padding: 20px 30px; border: 10px solid red; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容 </div> </body> </html>
(4) 上下左右
/*上下左右*/
padding: 20px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box{ width: 300px; height: 300px; /* 上下左右 */ padding: 20px; border: 10px solid red; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容 </div> </body> </html>
