當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )

發布時間：2024/3/13 CSS 47 豆豆

生活随笔收集整理的這篇文章主要介紹了【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】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。