【温故知新】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学习笔记（内边距~文字在盒子里的垂直居中）
内边距 1.内边距就是内容和边框之间的距离. 2.格式 2.1.非连写 .san1{width: 100px;height:100px;border: 1px solid black;padding- ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
【温故知新】CSS学习笔记（外边距合并）
CSS外边距合并外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 一.相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin ...
【温故知新】CSS学习笔记（开发者工具介绍）
Chrome工具浏览器中检查:F12键(或者右键"检查"Ctrl+Shift+i) 按下上面这个"箭头"按钮后会出现右边的部分,左边是HTML代码,右边则是C ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...

【温故知新】CSS学习笔记（盒子内边距介绍）

CSS盒子内边距

【温故知新】CSS学习笔记（盒子内边距介绍）相关推荐

最新文章

热门文章