【温故知新】CSS学习笔记（盒子内边距介绍）
生活随笔
收集整理的這篇文章主要介紹了
【温故知新】CSS学习笔记（盒子内边距介绍）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS盒子內邊距
?
這一節我們開始介紹內邊距（Padding）。
內邊距（Padding）屬性用于設置內邊距，內邊距是指邊框與顯示內容之間的距離。
【例子】
默認情況下邊框和內容緊挨著的；
這里我們設置“padding: 10px;”，發現上下左右都有了10像素的間距；
和上一節的邊框一樣，內邊距同樣分上下左右：
- padding-top:上內邊距
- padding-bottom:下內邊距
- padding-right:右內邊距
- padding-left:左內邊距
?
【綜合案例】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>內邊距-導航欄案例</title><style>.nav {/*width: 100px; 不可以給寬度*/height: 50px;border-top: 3px solid #FF8500;border-bottom: 1px solid #EDEEF0;background-color: #FCFCFC;}.nav a {height: 50px; /*行高*/display: inline-block; /*轉換*/line-height: 50px; /*垂直居中*/color: #4c4c4c; /*內容字體顏色*/text-decoration: none; /*不需要鏈接下劃線*/padding-right: 18px; /*右內邊距*/padding-left: 18px; /*左內邊距*/font-size: 14px; /*字體大小*/}.nav a:hover {background-color: #edeef0; /*鼠標經過變背景色*/color: #ff8400; /*鼠標經過變字體色*/} </style> </head> <body> <div class="nav"><a href="#">首頁</a><a href="#">移動客戶端</a><a href="#">設為首頁</a><a href="#">收藏夾</a></div> </body> </html>?
這里需要注意的是，后面跟幾個數值表示的意思是不同的。
| 值個數 | 表達的意思 |
| 1個值 | padding:上下左右內邊距； |
| 2個值 | padding:上下內邊距 左右內邊距； |
| 3個值 | padding:上內邊距 左右內邊距 下內邊距； |
| 4個值 | padding:上內邊距 右內邊距 下內邊距 左內邊距；（順時針） |
所以上面例子里面的寫法：
padding-right: 18px;? /*右內邊距*/
padding-left: 18px;? /*左內邊距*/
可以更改為：
padding: 0 18px; ??/* 左右內邊距為18px */
?
尤其值得需要注意的是內邊距的計算，一般而言盒子的大小都是固定的，比如下面的一個例子，在300px*300px的盒子里面垂直居中放置一個200px*200px的盒子，該如何實現呢？
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>內邊距計算</title><style>.father {width: 180px; height: 180px;background-color: yellow;padding-left: 100px;padding-top: 100px;border: 10px solid red;}.son {width: 100px; height: 100px;background-color: pink;}</style> </head> <body> <div class="father"><div class="son"></div></div> </body> </html>?
?
總結
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（盒子内边距介绍）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（盒子边框介绍
- 下一篇： 【温故知新】CSS学习笔记（盒子水平居中