【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
生活随笔
收集整理的這篇文章主要介紹了
【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、內邊距
- 1、概念
- 2、內邊距設置語法
- 3、內邊距設置效果
- 二、內邊距代碼示例
- 1、不設置邊距的示例
- 2、設置邊距的示例
一、內邊距
1、概念
內邊距 是 盒子 的 邊框 與 內容 之間的 間隔長度 ;
下圖中 , 中心 100 x 100 像素 的 是內容 , 內容外側 , 邊框內側 , 就是 內邊距 范圍 ;
2、內邊距設置語法
內邊距設置語法 :
- padding-left : 設置 左內邊距 ;
- padding-top : 設置 上內邊距 ;
- padding-right : 設置 右內邊距 ;
- padding-bottom : 設置 下內邊距 ;
3、內邊距設置效果
設置內邊距效果 : 為 盒子模型 設置 內邊距 Padding 后 ,
- 在 盒子內容 與 盒子邊框 中間 , 會產生一個內邊距 ,
- 與此同時 盒子模型 的 尺寸 會變大 ;
二、內邊距代碼示例
1、不設置邊距的示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>內邊距測試</title><base target="_blank"/><style type="text/css">div {width: 200px;height: 200px;/* 設置邊框 */border: 1px solid blue;}</style> </head> <body><div>內邊距測試</div> </body> </html>
展示效果 :
使用標尺測量 盒子模型的寬高都是 200 像素 ;
-
寬度 200 像素 :
-
高度 200 像素 :
2、設置邊距的示例
為 盒子模型 設置 左邊距 和 上邊距 , 代碼為 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>內邊距測試</title><base target="_blank"/><style type="text/css">div {width: 200px;height: 200px;/* 設置邊框 */border: 1px solid blue;/* 設置左邊距 */padding-left: 20px;/* 設置上邊距 */padding-top: 30px;}</style> </head> <body><div>內邊距測試</div> </body> </html>展示效果 :
使用標尺測量 盒子模型的 尺寸 為 220 x 230 像素 ;
-
寬度 220 像素 :
-
高度 230 像素 :
總結
以上是生活随笔為你收集整理的【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基础49 卖鸭子
- 下一篇： CSS3 will-change提高页面