【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
2023-09-14 09:07:26 时间
一、内边距复合写法
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 像素 ;
相关文章
- 手把手带你使用webpack4构建一个Vue开发编译环境,并实现代码分割,css代码分离
- html鼠标样式怎么去掉,CSS鼠标样式cursor属性怎么设置
- 怎么设置超链接网址css,css应该怎么设置超链接样式「建议收藏」
- 使用代码给 SAP UI5 XML 视图添加自定义 CSS
- css css样式表 选择器 声明「建议收藏」
- 通过HTML和CSS设计一个静态网页(练习实例,附完整代码)
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- 【CSS】开发者调试工具 ( 打开工具 | 设置工具显示位置 | 选择元素 | 查看手机版样式 | 开发者调试工具缩放 | 修改数值大小调试 | 查看 CSS 样式代码位置 )
- 【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
- 【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
- 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
- 自写脚本实现上线前本地批量压缩混淆 js , css 代码。详解编程语言
- CSS 溢出控制
- 过滤所有HTML代码和CSS,JS
- 仿客齐集首页导航条DIV+CSS+JS[代码实例]
- font和line-height之CSS代码书写顺序不同,导致显示效果不一样
- 如何用js控制css中的float的代码
- IE之死__原来与CSS有关
- css客齐集社区头像显示效果
- css下划线颜色一句话代码
- 多浏览器兼容的动态加载JavaScript与CSS
- div+css模拟表格效果代码
- juqery学习之六CSS--css、位置、宽高
- js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合
- JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
- js实现单一html页面两套css切换代码
- js获取某元素的class里面的css属性值代码