文章目录

一、内边距复合写法
- 1、语法
- 2、代码示例 - 设置 1 个值
- 3、代码示例 - 设置 2 个值
- 4、代码示例 - 设置 3 个值
- 5、代码示例 - 设置 4 个值

一、内边距复合写法

1、语法

盒子模型内边距可以通过

padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

进行分别设置 , 也可以通过 padding 属性进行复合实现 ;

padding 属性值设置 : 设置 1 ~ 4 个值 , 单位像素 px ;

设置 1 个值 : 设置上下左右内边距 ;
设置 2 个值 : 设置上下、左右内边距 ;
设置 3 个值 : 设置上、左右、下内边距 ;
设置 4 个值 : 设置上、右、下、左内边距 ;

2、代码示例 - 设置 1 个值

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;/* 设置 上下左右 内边距 20px */padding: 20px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 : 由 200 x 200 像素变为 240 x 240 像素 ;

使用标尺进行测量 :

盒子边框宽度 240 像素 :

盒子边框高度 240 像素 :

在浏览器中 , 按下 F12 进入调试模式 ;

使用选择工具 , 将鼠标移动到盒子模型上方 , 会显示如下内容 ;

淡蓝色是盒子内容的颜色 ;

青色是盒子内边距的颜色 ;

右侧的图 , 可以很明确的看出 , 盒子内容 , 内边距 , 边框 , 外边距的轮廓 ;

3、代码示例 - 设置 2 个值

padding 属性设置 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;/* 设置 上下内边距 20px , 左右内边距 10px */padding: 20px 10px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 :

F12 进入调试模式 , 查看盒子模型宽高 ;

由下图可知 , 盒子宽度 220 像素 , 高度 240 像素 ;

4、代码示例 - 设置 3 个值

padding 属性设置 3 个值 : 设置上、左右、下内边距 ;

代码示例 :

<!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;/* 设置 上内边距 20px , 左右内边距 10px , 下内边距 30px */padding: 20px 10px 30px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 :

盒子的宽高是 250 x 220 像素 ;

5、代码示例 - 设置 4 个值

padding 属性设置 4 个值 : 设置上、右、下、左内边距 ;

代码示例 :

<!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;/* 设置 上内边距 20px , 右内边距 10px , 下内边距 30px , 左内边距 50px */padding: 20px 10px 30px 50px;}</style>
</head>
<body><div>内边距测试</div>
</body>
</html>

展示效果 :

F12 进入调试模式 ;

盒子宽度 260 像素 , 高度 250 像素 ;

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )相关推荐

html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
前端笔记 | CSS盒子模型
CSS盒子模型一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距二.特殊样式 2 ...
CSS 盒子模型（border、padding、margin)
CSS盒子模型 Css盒子模型本质上是一个盒子,封装周围的html元素,他包括边框.内容.外边距.内边距. 1.边框边框(border)可以设置元素的边框,他由三部分组成:边框宽度(粗细).边框样式 ...
CSS盒子模型/页面布局
1.盒子模型页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置 ...
CSS学习（第三天）（层叠性、继承性、优先级，CSS 盒子模型）
紧接第二天 CSS学习第三天 5 CSS的三大特性 5.1 层叠性 5.2 继承性 5.2.1 行高的继承 5.3 优先级 5.3.1 优先级(注意) 5.3.2 优先级(权重叠加) 6 CSS 盒子 ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
CSS盒子模型一.盒子模型二. 块级元素与行级元素✪✪✪ 块级元素行内元素转化三.导航栏的实现一.盒子模型盒子是页面内容的容器,通过盒子的堆叠.嵌套能实现网页布局各属性: 大小(wid ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

文章目录

一、内边距复合写法

1、语法

2、代码示例 - 设置 1 个值

3、代码示例 - 设置 2 个值

4、代码示例 - 设置 3 个值

5、代码示例 - 设置 4 个值

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )相关推荐

最新文章

热门文章