【温故知新】CSS学习笔记（盒子内边距介绍）
生活随笔
收集整理的这篇文章主要介绍了
【温故知新】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学习笔记（盒子边框介绍
- 下一篇： 【温故知新】CSS学习笔记（盒子水平居中